jQuery - .click() and .toggle()

Question

当用户点击链接时，我想显示一个图像，当他再次点击时，隐藏它

<div class="row">
 <div class="col-md-12">
  <img id="c0" src="images/item-1.png">
  <img id="c1" src="images/item-2.png">
 </div>
</div>
<a id="ac1" href="#">Link</a>
$('#c1').hide();
$('#ac1').click(function(){
    $('#c0').hide();
    $('#c1').show();
});

它既有效又简单。但当有人再次点击链接时，它不允许隐藏图像。我想知道是否有一个解决方案可以应用于其他情况。感谢

Answer 1

您可以使用这个：

<div class="row">
    <div class="col-md-12">
        <img style="display:none" id="c0" src="images/item-1.png">
        <img id="c1" src="images/item-2.png">
    </div>
</div>
$( "DIV.col-md-12" ).click(function() {
    $( "DIV.col-md-12 IMG" ).toggle();
});

Answer 2

使用toggle（）函数：

<div class="row">
 <div class="col-md-12">
  <img id="c0" src="images/item-1.png">
  <img id="c1" src="images/item-2.png">
 </div>
</div>
<a id="ac1" href="#">Link</a>
$('#c1').hide();
$('#ac1').click(function(){
    $('#c0').toggle(speed);
    $('#c1').toggle(speed);
});