javascript - javascript if else 点击事件

Question

我正在尝试在下面添加一个 if else 语句

$('#togglediv4').click(function(e){
     e.preventDefault();
    $('#link4').attr('src','images/contact_link_clicked.png');
});

如果没有单击事件，我希望图像更改回原始图像，否则单击后的所有链接都将停留在新图像上。

因此，如果未单击图像，我想显示原始图像。

$('#link4').attr('src','images/contact_link_original.png');

Answer 1

使用attr回调函数和三元运算符。

$('#togglediv4').click(function(e){
     e.preventDefault();
     $('#link4').attr('src',function(i, src){
          return src === 'images/contact_link_original.png'
          ? 'images/contact_link_clicked.png'
          : 'images/contact_link_original.png'
     });
});

Answer 2

您只需将src原始<img>标签的属性设置为：mages/contact_link_original.png

然后像上面一样添加点击事件。

默认情况下，当您的 div 未被点击时，它将包含原始图像。

编辑：根据您的评论，我将执行以下操作：

• 为所有图像添加一个类
• 单击任何图像时，将 src 属性更改回具有该类的所有图像的原始属性。（您可以使用$('.imgClass')）
• 然后使用新图像更新单击的图像。

Answer 3

我可能没有正确理解您的问题，但在我看来您需要使用mousedownandmouseup事件而不是click：

$('#togglediv4').mousedown(function(e){
    e.preventDefault();
    $('#link4').attr('src','images/contact_link_clicked.png');
}).mouseup(function(e){
    e.preventDefault();
    $('#link4').attr('src','images/contact_link_original.png');
});

Answer 4

我想你正在寻找这样的东西：

$('#togglediv4').click(function(e){
    e.preventDefault();
    if ($('#link4').attr('src') == 'images/contact_link_original.png') {
        $('#link4').attr('src','images/contact_link_clicked.png');
    }       
});