代码之家 › 专栏 › 技术社区 › Brad

根据链接的状态显示不同的图像

html jquery

Brad · 技术社区 · 16 年前

我有一个链接,用户选择,显示一个段落,一旦他们选择了它,我希望它显示一个不同的图像,最初的图像将是一个加号(+),视觉传达,它可以被点击,以幻灯片向下的内容看到,一旦被点击,我希望它改变为一个减号(-),所以他们可以点击,它会滑回来消失。

我有幻灯片切换下来,我只需要插入图像文件路径,根据当前状态(显示或隐藏)的链接。

<a href="#" class="slide-down">Click <img src="insert-filename-of-image"></a>

$(document).ready(function() {
 $('.slide-down').click(function() {
  $(".content-to-slide-down").slideToggle(100);
 });
});

我只需要在 <img src="">

感谢您的帮助。

3 回复 | 直到 16 年前

Mikael Svenson 16 年前

$(document).ready(function() {
 $('.slide-down').click(function() {
  $(".content-to-slide-down").slideToggle(100);
  var img = $("img", this).attr("src");
  if( img == "plusimage-path") // or check the end of the path or similar
     $("img", this).attr("src", "minusimage-path");
  else
     $("img", this).attr("src", "plusimage-path");
 });
})

Henrik Joreteg 16 年前

$(document).ready(function() {
 $('.slide-down').click(function() {
  $(".content-to-slide-down").slideToggle(100, function () {
    if ( {{ whatever condition you can use to check }} ) {
      $('img').attr('src', {{ URL HERE }} );
    }
    else {
      $('img').attr('src', {{ OTHER URL HERE }} );
    }
  });
 });
});

另一个选项是使用.toggle()

$(document).ready(function() {
   $('.slide-down').toggle(function() { 
        $(this).slideDown();
        $('img#id_of_image_here').attr('src', 'URL to minus icon');
        // whatever else you want to happen on first click
     },
     function () {
        $(this).slideUp();
        $('img#id_of_image_here').attr('src', 'URL to plus icon');
        // whatever you want the other click, it will track state for you.
     }
   );
});

HurnsMobile 16 年前

$('.responseHeader').click( function(){
        if($(this).find('.plus').length)
        {
            var $expImg = $(this).find('.plus');
            $expImg.attr('src','/static/icons/minus_9x9.png');
            $expImg.addClass('minus');
            $expImg.removeClass('plus');
        }
        else
        {
            var $expImg = $(this).find('.minus');
            $expImg.attr('src','/static/icons/plus_9x9.png');
            $expImg.addClass('plus');
            $expImg.removeClass('minus');
        }
        $(this).parent().children('.responseBody').slideToggle(100);     
    });

<div id='responsePane'>


        <div class='response'>      
            <div class='responseHeader'>
                <span><img class='expanderImg plus' src='/static/icons/plus_9x9.png' alt='expand'>&nbsp Response By: </span>
                <span> <b>Adam Jones</b> </span>        
                <div class='responseDate' style='display:inline;width:100%;'><span> &nbsp&nbsp&nbsp&nbsp&nbsp<i>2010-06-15</i> </span></div>
            </div>

            <div class='responseBody'>
                <span> <b>Response: </b></span>
                <span> Test Response </span>
            <br />
            </div>
        </div>

        <div class='response'>      
            <div class='responseHeader'>

                <span><img class='expanderImg plus' src='/static/icons/plus_9x9.png' alt='expand'>&nbsp Response By: </span>
                <span> <b>John Smith</b>&nbsp<img align='top' src='/static/icons/fmlogo_16x16.png' alt='Fi-Med'> </span>        
                <div class='responseDate' style='display:inline;width:100%;'><span> &nbsp&nbsp&nbsp&nbsp&nbsp<i>2010-06-15</i> </span></div>
            </div>
            <div class='responseBody'>

                <span> <b>Response: </b></span>
                <span> Test Response </span>
            <br />
            </div>
        </div>