使用jquery改變img onclick

-1

我是jQuery的新手，已經搜索了我的答案，但沒有任何確切的答案。可以說我有一個盒子的圖像。點擊時，我希望該框更改爲另一個圖像。如果圖像被再次點擊，它會回到一個盒子。使用jquery改變img onclick

我有以下代碼：

<script> 
    function changeImage() { 
     if (document.getElementById("animals").src == "lion.jpg") { 
      document.getElementById("animals").src = "box.jpg"; 
     } else { 
      document.getElementById("animals").src = "lion.jpg"; 
     } } 

</script>

我的HTML

<img src="box.jpg" id="animals" onclick="getValue()" /> 
<img src="lion.jpg" id="animals" onclick="getValue()" />

在此先感謝您的幫助。

來源

2014-10-20 Christobel

但有沒有jQuery的存在。哦，ID **必須是唯一的。 – j08691 2014-10-20 01:52:08

您可以通過元素實例點擊爲您onclick功能的參數使用this

你可能想是這樣的：

HTML：

<img src="box.jpg" onclick="changeImage(this)" />

JS：

function changeImage(element){ 
    element.src = element.src === 'box.jpg' ? 'lion.jpg' : 'box.jpg'; 
}

我不知道你是什麼試圖在您的標記

來源

2014-10-20 02:03:18 charlietfl

除了'element.src'將永遠是一個絕對URL（並且永遠不會等於''lion.jpg''）;你應該（幾乎肯定）使用'element.getAttribute（'src'）'。 – 2014-10-20 02:06:23

所示。如果你真的想使用jQuery，命名爲getValue()功能，在這裏做的是你如何能做到這一點：

$(function() { 
 
    $('[data-image]').on('click',function() { 
 
    var newImage = $(this).data('image'); 
 
    $(this).data('image', this.src); 
 
    this.src = newImage; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR5shA8HsX0Eojw5BGHKrh4v0l2VosV7Dr37SW4jwgdhbATy1yEm6ismw" class="animals" data-image="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQ3_huaTLnaerihPDAQGId2Rte-uQuS1ylTFPJCUKPPHxcB7zLhooRHGg" /> 
 
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQkyEb17ZBn31tVrGP53bOGvT66Rg6SKueB2XFv-NHRfvmXS2D-JfmR2bM" class="animals" data-image="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScoskjmn10XRwl4zc_Brm_YwH0fsNRkicqe46gWTCMHzPLmr0s97lSs4o" />

來源

2014-10-20 02:31:43 PeterKA

ID **必須是唯一的 – j08691 2014-10-20 03:04:28

非常真實......有些忽視它們，因爲我甚至沒有使用它們。將刪除，所以他們不是分心。 – PeterKA 2014-10-20 03:07:59

使用jquery改變img onclick

回答

相關問題