การเปลี่ยนรูปภาพในฟังก์ชั่นสลับ jquery

ฉันกำลังพยายามเปลี่ยนรูปภาพโดยใช้คำสั่งแทนที่เมื่อสลับโดยใช้ 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");
            }
        });
    });
});​

person Allen    schedule 10.09.2012    source แหล่งที่มา
comment
รหัสไม่ควรขึ้นต้นด้วยตัวเลข   -  person meder omuraliev    schedule 10.09.2012
comment
ทำไมคุณถึงใช้ # ใน id มีเหตุผลใดบ้างที่ใช้สิ่งนี้?   -  person NullPoiиteя    schedule 10.09.2012


คำตอบ (6)


คุณไม่ได้กำหนดมันกลับไปที่ src ลอง:

toggle_switch.attr("src", toggle_switch.attr("src").replace("down", "up"));
person Rusty Jeans    schedule 10.09.2012

รหัสน้อยลงจะดีกว่า

HTML

<a href="/th#" 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);
person iambriansreed    schedule 10.09.2012

คุณควรใช้สิ่งที่ชอบ;

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

ที่นี่ เป็นการสาธิตสด

person Alfred    schedule 10.09.2012

ฉันคิดว่าคุณควรลอง jQuery.UI.toggleSwitch()

person Sender    schedule 10.09.2012

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

ลองอันนี้

person Mahesh    schedule 24.05.2013

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

วิธีแก้ปัญหาง่ายๆ อีกอย่างอาจช่วยใครบางคนได้ ;)

person salah    schedule 16.07.2013