jquery - 点击链接更改图片

Question

我有以下代码，它显示三个按钮图像，当单击它们时，它们会使用 jQuery 淡入相关的 div ...

http://jsfiddle.net/ttj9J/11/

HTML

<a class="link" href="#" data-rel="content1"><img src="http://i.imgur.com/u1SbuRE.png"></a>
<a class="link" href="#" data-rel="content2"><img src="http://i.imgur.com/RxSLu4i.png"></a>
<a class="link" href="#" data-rel="content3"><img src="http://i.imgur.com/U8Jw3U6.png"></a>


<div class="content-container">
    <div id="content1">This is the test content for part 1</div>
    <div id="content2">This is the test content for part 2</div>
    <div id="content3">This is the test content for part 3</div>
</div>

CSS

.content-container {
    position: relative;
    width: 400px;
    height: 400px;
}
.content-container div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

查询

$(".link").click(function(e) {
      e.preventDefault();
      $('.content-container div').fadeOut('slow');
      $('#' + $(this).data('rel')).fadeIn('slow');

});

$( document ).ready(function() {
    $(".link")[0].click(); 
});

我也有这三个备用（按下）按钮图像......

http://i.imgur.com/vi1KLp9.png
http://i.imgur.com/syroxDR.png
http://i.imgur.com/l91OpLL.png

我希望图像在单击时更改为这些，有人可以帮忙吗？

Answer 1

我建议您将所有显示代码放在 CSS 中。然后对您的 HTML 进行建模，使其更具表现力。这意味着，如果您单独查看 html 代码，您可以知道按钮被按下，因为“向下”类已附加到它。

CSS：

        .redButton > div
        {
            background-image: url('http://i.imgur.com/u1SbuRE.png');
        }
        .redButton.Down > div
        {
            background-image: url('http://i.imgur.com/vi1KLp9.png');
        }
        .link > div
        {
            width: 88px;
            height: 88px;
            display:inline-block;
        }

JavaScript：

 $(".link").click(function(e) {
             e.preventDefault();

             var mainButton = $(e.target).parent();

             $('.link').not(mainButton).removeClass('Down');  

             mainButton.toggleClass('Down');
             $('.content-container div').fadeOut('slow');    
             $('#' + $(this).data('rel')).fadeIn('slow');        
             });

HTML：

 <a class="link redButton" href="#" data-rel="content1">
        <div></div>
        </a>
    <div class="content-container">
        <div id="content1">This is the test content for part 1</div>
    </div>

无需在 JavaScript (puke) 中维护图像数组。而且您正在按照预期的方式正确使用 HTML 堆栈的每一层。

jsFiddle 热门演示

Answer 2

尝试这个：

var imgArray = [
    'http://i.imgur.com/vi1KLp9.png',
    'http://i.imgur.com/syroxDR.png',
    'http://i.imgur.com/l91OpLL.png'
];

$(".link").click(function(e) {
      e.preventDefault();
      // Change the image source.
      $(this).find('img').prop('src', imgArray[$(this).index()]);

      $('.content-container div').fadeOut('slow');
      $('#' + $(this).data('rel')).fadeIn('slow');
});

JSFiddle 演示

更新#2：

如果点击一个需要回滚其他图片，需要在开头存储默认图片源：

var imgArray = [
    'http://i.imgur.com/vi1KLp9.png',
    'http://i.imgur.com/syroxDR.png',
    'http://i.imgur.com/l91OpLL.png'
], defaultImg = [];

$('.link').find('img').each(function(){
    defaultImg.push($(this).prop('src'));
});

$(".link").click(function(e) {
    e.preventDefault();
    
    $(".link").find('img').each(function(i) {
        $(this).prop('src', defaultImg[i]);
    });

    $(this).find('img').prop('src', imgArray[$(this).index()]);

    $('.content-container div').fadeOut('slow');
    $('#' + $(this).data('rel')).fadeIn('slow');
});

JSFiddle 演示 #2

更新#3：

如果使用imgArrayto store new srcattributes 使代码变得复杂，您可以将srcintodata-*属性存储，例如：data-newsrc="path/to/new/src"，然后您可以通过以下方式访问它$(selector).data('newsrc');

$(this).find('img').prop('src', $(this).find('img').data('newsrc'));

JSFiddle 演示 #3

Answer 3

http://jsfiddle.net/ttj9J/19/

JS

$(".link").click(function(e) {
      e.preventDefault();
      $('.content-container div').fadeOut('slow');

      //retrieve src for the new img
      var new_img_src = $(this).data('newimg');
      var current_img = jQuery("img", this);

      //swap data-newimg src with current src
      $(this).data('newimg', current_img.attr("src"));    
      current_img.attr("src",new_img_src);

      $('#' + $(this).data('rel')).fadeIn('slow');     
});

html

<a class="link" href="#" data-rel="content1" data-newimg="http://i.imgur.com/vi1KLp9.png">
    <img src="http://i.imgur.com/u1SbuRE.png">
</a>
<a class="link" href="#" data-rel="content2" data-newimg="http://i.imgur.com/syroxDR.png">
    <img src="http://i.imgur.com/RxSLu4i.png">
</a>
<a class="link" href="#" data-rel="content3" data-newimg="http://i.imgur.com/l91OpLL.png">
    <img src="http://i.imgur.com/U8Jw3U6.png">
</a>


<div class="content-container">
    <div id="content1">This is the test content for part 1</div>
    <div id="content2">This is the test content for part 2</div>
    <div id="content3">This is the test content for part 3</div>
</div>