Question

我有一个用户选择的链接，显示一个段落，一旦他们选择它，我希望它显示一个不同的图像，最初图像将是一个加号（+），以便在视觉上传达它可以是单击以向下滑动要查看的内容，单击它后，我希望它更改为减号（ - ），这样他们就可以点击它，它会向上滑动并消失。

我已经将slideToggle关闭了，我只需要根据链接的当前状态（显示或隐藏）插入图像文件路径。

jQuery和HTML示例：

<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="">

中放置适当的图像文件名，路径

感谢任何帮助。

Answer 1

$(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");
 });
})

Answer 2

有几种不同的方法可以做到这一点。最简单的可能只是使用回调。

$(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.
     }
   );
});

Answer 3

可能不是最干净的方式，但这就是我现在在我网站上运行的内容：

$('.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);     
    });

编辑**以下是上下文的相关HTML：

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

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

3 个答案: