jQuery - .click（）和.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);
});