在jquery切换功能上更改图像

我试图在使用jquery切换时使用replace命令更改图像..基本显示向下箭头，在内容显示后变成向上箭头。除了向下箭头之外的下面的工作不会被替换。在jquery切换功能上更改图像

<img src="/images/arrow_down.png" id="#1" class="nav-toggle"> 
<div id="1" style="display:none">some content</div>

，这里是jQuery代码

jQuery('document').ready(function($) { 
    jQuery('.nav-toggle').click(function() { 
     var collapse_content_selector = $(this).attr('id'); 
     var toggle_switch = $(this); 
     $(collapse_content_selector).toggle(function() { 
      if ($(this).css('display') == 'none') { 

      } else { 
       toggle_switch.attr("src").replace("down", "up"); 
      } 
     }); 
    }); 
});

来源

2012-09-10 Allen

的ID不应该以数字开头。 –

为什么你在id中使用＃有没有什么理由使用它？ –

你并没有使用它回到SRC，请尝试：

toggle_switch.attr("src", toggle_switch.attr("src").replace("down", "up"));

来源

2012-09-10 16:30:30

太好了......谢谢......那个作品！ – Allen

我想你应该尝试jQuery.UI.toggleSwitch()

来源

2012-09-10 16:33:25 Sender

代码越少越好。

HTML

<a href="#" id="#arrow-toggle"> 
    <img src="/images/arrow_down.png"> 
    <img src="/images/arrow_up.png" class="up" style="display: none;"> 
</a> 
<div id="content" style="display:none">some content</div>

jQuery的

(function($) { 

    $('#arrow-toggle').click(function(event) { 
     event.preventDefault(); 
     $('img:visible', this).hide().siblings().show(); 
     $('#content').toggle($('img:visible').is('.up')); 
    }); 

})(jQuery);

来源

2012-09-10 16:36:04 iambriansreed

你应该使用类似;

jQuery('.nav-toggle').click(function() { 
     var collapse_content_selector = $(this).attr('id'); 
     var toggle_switch = $(this); 
     $(collapse_content_selector).toggle(function() { 
      if ($(this).css('display') == 'none') { 
       toggle_switch.attr("src", toggle_switch.attr("src").replace("image_2.jpg", "image_1.jpg")); 
      } else { 
       toggle_switch.attr("src", toggle_switch.attr("src").replace("image_1.jpg", "image_2.jpg")); 
      } 
     }); 
    });

Here是现场演示。

来源

2012-09-10 16:49:05

HTML

<img src="/images/arrow_down.png" id="#1" class="nav-toggle"> 
<div id="1" style="display:none">some content</div>

jQuery的

$(function(){ 
    $('.nav-toggle').on('click', function(){ 
    var t = $(this); 
    var imgSrc = t.attr('src'); 
    var divId = t.attr('id'); 
    $(divId).toggle('slow', function() { 
     if (imgSrc === '/images/arrow_down.png') { 
     t.attr({'src' : '/images/arrow_up.png'}); 
     } else { 
     t.attr({'src' :'/images/arrow_down.png'}); 
     } 
    }); 
    }); 
});

试试这个

来源

2013-05-24 10:01:20 Mahesh

$("div#id").slideToggle(function() { 
      if ($(this).css('display') == 'none') { 
       $("div#id").css({'background-image':'url(css/img/nav_plus.gif)'}); 
      } else { 
       $("div#id").css({'background-image':'url(css/img/nav_minus.gif)'}); 
      } 
     });

另一种简单的解决方案可能是能帮助别人;）

来源

2013-07-16 00:23:00 salah

在jquery切换功能上更改图像

回答

相关问题