添加href链接到已通过js点击显示的图像

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现在包含“点击”。如果没有，那么交换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对选择，返回一个布尔（真）如果它。

'[src*="click"]'是确定src属性是否包含'click'的选择器。 *意味着包含任何地方。还有其他组合，例如^=。

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

Answer 2

由于您已经在处理点击事件，因此您可能希望在同一事件中执行此逻辑。这样的结构如下：

if (/* some condition */) { 
    window.location.href = someUrl; 
} 

我想你需要定义什么样的条件。它会基于图像的当前src吗？像这样的东西？：

if ($(this).attr('src') === 'images/object/click-1.png') { 
    window.location.href = someUrl; 
} 

（您也不得不定义什么someUrl是的，当然。）