Question

我有一个创建滑动图片拼图的任务，您可以在其中单击每个图像（这是忍者图片的一部分），并在其位置出现替代图像（猫图片的一部分）。一种用于匹配两个图像的老虎机。我们应该使用自定义属性（代码中的data-alt-src）并且不使用JavaScript变量或任何CSS。我根本不理解如何使用自定义属性来交换图像。这项任务表明不要花费超过2个小时制作这个并且远远超过这个。我一直在尝试使用.attr的jQuery脚本的变体，但无济于事。

<script>
    $(document).ready(function(){
        $('img').click(function(){
            $(this).slideToggle('data-alt-src');
            $(this).slideToggle();
        })

    })
</script>

<img src='ninja0.png' data-alt-src='cat0.png' />
<br/>
<img src='ninja1.png' data-alt-src='cat1.png' />
<br/>
<img src='ninja2.png' data-alt-src='cat2.png' />
<br/>
<img src='ninja3.png' data-alt-src='cat3.png' />
<br/>
<img src='ninja4.png' data-alt-src='cat4.png' />

Answer 1

尝试这样的事情，

<script>
$(document).ready(function() {
     $('img').click(function(){
                if($(this).attr('src')===$(this).data('src1')){
                    $(this).attr('src',$(this).data('src2'));
                }
                else{
                    $(this).attr('src',$(this).data('src1'));
                }
      });

});

</script>

<img src='ninja0.png'' data-src1='ninja0.png' data-src2='cat0.png'/>
<img src='ninja1.png'' data-src1='ninja1.png' data-src2='cat1.png'/>
<img src='ninja2.png'' data-src1='ninja2.png' data-src2='cat2.png'/>
<img src='ninja3.png'' data-src1='ninja3.png' data-src2='cat3.png'/>

如何在jQuery中交换图像

1 个答案: