单击锚点显示某个元素

Question

如何一次只显示一个输入？ 例如，如果用户单击锚点＃3，他会看到输入内容＆＃34; 1＆＃34;。 我的猜测是这样的：

＆＃13;

＆＃13;

$(".unit a").click(function() {
  $(this).toggleClass("active");
  $('input').toggle(); // ??
  return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='amount amount-piece'>
  <input type="text" name="amount2" id="amount2" value="7" data-rate="7" readonly="readonly" />
</div>
<div class='amount amount-square'>
  <input data-rate="1.25" readonly="readonly" type="text" value="1.25" name="basket[amount]" id="basket_amount" />
</div>
<div class='amount amount-box'>
  <input type="text" name="amount3" id="amount3" value="1" data-rate="1" readonly="readonly" />
</div>
<div class='unit'>
  <a href="#">#1</a>
  <a href="#">#2</a>
  <a href="#">#3</a>
</div>

＆＃13;

＆＃13;

＆＃13;

然而它无效。

https://jsfiddle.net/jjrLgpjp/

Answer 1

要实现此目的，您需要hide()所有input，然后才能显示与所点击的<a>元素相关的内容。您可以使用index()按eq()匹配它们。试试这个：

$(".unit a").click(function() {
  var index = $(this).toggleClass("active").index();
  $('input').hide().eq(index).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="amount amount-piece">
  <input type="text" name="amount2" id="amount2" value="7" data-rate="7" readonly="readonly" />
</div>
<div class="amount amount-square">
  <input type="text" name="basket[amount]" id="basket_amount" value="1.25" data-rate="1.25" readonly="readonly"  />
</div>
<div class="amount amount-box">
  <input type="text" name="amount3" id="amount3" value="1" data-rate="1" readonly="readonly" />
</div>

<div class="unit">
  <a href="#">#1</a>
  <a href="#">#2</a>
  <a href="#">#3</a>
</div>

Answer 2

另一种选择，您可以使用data属性：

＆＃13;

＆＃13;

$( ".unit a" ).click(function(e) {
    e.preventDefault();
    $(this).toggleClass( "active" );
    $('.'+$(this).data("target")).show().siblings().not($(this).parent()).hide();
});

＆＃13;

.amount:not(:first-child){
  display:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class='amount amount-piece'>
  <input type="text" name="amount2" id="amount2" value="7" data-rate="7" readonly="readonly" />
</div>
<div class='amount amount-square'>
  <input data-rate="1.25" readonly="readonly" type="text" value="1.25" name="basket[amount]" id="basket_amount" />
</div>
<div class='amount amount-box'>
  <input type="text" name="amount3" id="amount3" value="1" data-rate="1" readonly="readonly" />
</div>
<div class='unit'>
  <a data-target="amount-piece" href="#">#1</a>
  <a data-target="amount-square" href="#">#2</a>
  <a data-target="amount-box" href="#">#3</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以通过根据锚ID向您的输入添加属性（对于Eg： for="#one" ）来实现，然后相应地选择

＆＃13;

＆＃13;

$( ".unit a" ).click(function() {
    $( this ).toggleClass( "active" );
   // $('input').toggle();  // ??
   $('input').hide();
   $('input[for="#'+ $( this ).attr('id')+'"]').show();
    return false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='amount amount-piece'>
  <input type="text" name="amount2" id="amount2" for ="#one" value="7" data-rate="7" readonly="readonly" />
</div>
<div class='amount amount-square'>
  <input data-rate="1.25" readonly="readonly" type="text" for ="#sec" value="1.25" name="basket[amount]" id="basket_amount" style ="display:none;" />
</div>
<div class='amount amount-box'>
  <input type="text" name="amount3" id="amount3" for ="#thd" value="1" data-rate="1" readonly="readonly" style ="display:none;"/>
</div>
<div class='unit'>
  <a href="#" id="one">#1</a>
  <a href="#" id="sec">#2</a>
  <a href="#" id="thd">#3</a>
</div>

＆＃13;

＆＃13;

＆＃13;