Question

我是jQuery的新手并且已经搜索了我的答案，但没有任何确切的答案。可以说我有一个盒子的图像。我想让盒子在点击时更改为另一个图像。如果再次点击图像，它将返回到一个框。

我有以下代码：

<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()" />

提前感谢您的帮助。

Answer 1

您可以使用onclick

将在this函数中点击的元素实例作为参数传递

您可能需要以下内容：

HTML：

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

JS：

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

我不知道您尝试使用标记中显示的名为getValue()的函数做什么

Answer 2

如果您真的想使用jQuery，请按以下步骤操作：

＆＃13;

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

＆＃13;

<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" />

＆＃13;

使用jquery更改img onclick

2 个答案: