javascript - 给已通过js点击显示的图片添加href链接

Question

类似于我最近问的一个问题，但之前的问题是使用鼠标悬停，所以对于触摸屏来说是垃圾。

这是 3 个带有图像的 div。单击时，它们分别更改为第二个图像并将其他 2 个重置为标准图像。一切正常。

但是当任何 div 中的第二个图像处于事件状态时，我希望能够单击此图像并导航到不同的页面。

明明在 html 中添加 href 只是导航，忽略了 JS 效果。

感谢阅读。

$(document).ready(function(){
     $('#s1').click(function(){
         $('#s1').attr('src', 'images/object/click-1.png');
          $('#s2').attr('src', 'images/object/standard-2.jpg');
           $('#s3').attr('src', 'images/object/standard-3.jpg');
     });
     $('#s2').click(function(){
         $('#s1').attr('src', 'images/object/standard-1.jpg');
          $('#s2').attr('src', 'images/object/click-2.png');
           $('#s3').attr('src', 'images/object/standard-3.jpg');
     });
     $('#s3').click(function(){
          $('#s1').attr('src', 'images/object/standard-1.jpg');
           $('#s2').attr('src', 'images/object/standard-2.jpg');
            $('#s3').attr('src', 'images/object/click-3.png');
     });


});


<div id="section3" class="container-fluid" align="center">
    <div class="row row-centered ">

    <div id="top-box-1" class="col-sm-4"> 
    <img src="images/object/standard-1.jpg" class="std" id="s1" width="300" height="300"/>
    </div>


    <div id="top-box-2" class="col-sm-4">
    <img src="images/object/standard-2.jpg" class="std "id="s2" width="300" height="300"/>
    </div>


    <div id="top-box-3" class="col-sm-4">
    <img src="images/object/standard-3.jpg" class="std" id="s3" width="300" height="300"/>
    </div>

 </div>
</div>

Answer 1

您可以查看 src 现在是否包含“click”。如果不是，则交换 src 和 return false 以停止 href:-

$('#s1').click(function(e) {
  if (!$(this).is('[src*="click"]')) {
    $('#s1').attr('src', 'images/object/click-1.png');
    $('#s2').attr('src', 'images/object/standard-2.jpg');
    $('#s3').attr('src', 'images/object/standard-3.jpg');
    return false;
  }
});

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

<div id="section3" class="container-fluid" align="center">
  <div class="row row-centered ">

    <div id="top-box-1" class="col-sm-4">
      <a href="http://stackoverflow.com/">
        <img src="images/object/standard-1.jpg" class="std" id="s1" width="300" height="300" />
      </a>
    </div>


    <div id="top-box-2" class="col-sm-4">
      <a href="http://stackoverflow.com/">
        <img src="images/object/standard-2.jpg" class="std " id="s2" width="300" height="300" />
      </a>
    </div>


    <div id="top-box-3" class="col-sm-4">
      <a href="http://stackoverflow.com/">
        <img src="images/object/standard-3.jpg" class="std" id="s3" width="300" height="300" />
      </a>
    </div>

  </div>
</div>

要分解它:if (!$(this).is('[src*="click"]')) {

$(this).is 允许您根据选择器检查 this，如果是，则返回一个 bool 值 (true)。

'[src*="click"]' 是判断src属性是否包含'click'的选择器。 * 表示包含任何地方。还有其他组合，如 ^= 开头。

因此 $(this).is('[src*="click"]') 如果 src 有“点击”，则表示为真。但是您需要将其反转为不包含。这就是 ! 的用途，意思是如果 this(被点击的元素)在 src 中没有得到“点击”。