jquery - 替换内容jquery

Question

想换图片

HTML：

    <a href="#"><img src="products.jpg"  alt="products" /></a>
    <a href="#"><img src="another-image.jpg"  alt="another-image" /></a>

Answer 1

在更改图像源之前，请使用 jQuery 函数.data()保存它们。然后，当您单击它们时，恢复 src 属性。像这样的东西：

if ( $(window).width() <= 480 ) {

    $('img').each(function (i, k) {
        $(k).data('src', $(k).attr('src'));
        $(k).attr('src', 'temp_image.jpg');
    });

    $('img').click(function () {
        $(this).attr('src', $(this).data('src'));
    });
}

参考： http ://api.jquery.com/data/

Answer 2

这应该很容易。

首先， .click() 将函数绑定到事件单击并调用对象。你不能（你可以，但它不会像你期望的那样工作）在 .each() 内绑定事件

尝试这样的事情：

<div id="banner">
    <a href="#"><img src="banner.jpg" id="realImg1" alt="banner" /></a>
    <a href="#"><img src="another-image.jpg" id="realImg2" alt="another-image" /></a>
</div>


<script>
    $(document).ready(function() {

        var counter = 0;
        var toggle_images = function () {

              if (counter % 2) // if pair, change all pics to "dummy.jpg"
              {
                  $('img').each(function
                  ({
                        $(this).attr('src', 'dummy.jpg');
                  };
              }
              else  // if odd restore its initial src (you can recycle the value in alt)
              {
                   $('img').each
                   ({
                       // get the name from the alt property and append '.jpg'
                       var pic_path = $(this).attr('alt') + '.jpg'
                       $(this).attr('src', pic_path); 
                   });
              }
              counter += 1;

        };

        $('img').click(toggle_images);  // bind the event
</script>