添加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是的，當然。）