Question

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

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;
}

JQUERY

$(".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

试试这个：

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 Demo

更新＃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 Demo #2

更新＃3：

如果使用imgArray存储新的src属性会使代码复杂，则可以将src存储到data-*属性中，例如： data-newsrc="path/to/new/src"，然后您只需$(selector).data('newsrc');

即可访问它

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

<强> JSFiddle Demo #3

Answer 2

我建议你把所有显示代码放在CSS中。然后建模您的HTML以更有表现力地工作。这意味着，如果单独查看html代码，可以告诉按钮被按下，因为已经附加了'Down'类。

<强> 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 Hot Demo

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>

链接点击更改图像

3 个答案:

更新＃3：