Mengubah gambar pada fungsi sakelar jquery

Saya mencoba mengubah gambar menggunakan perintah ganti saat beralih menggunakan jquery..pada dasarnya menunjukkan panah ke bawah yang menjadi panah ke atas setelah konten terungkap. Kode berikut ini berfungsi kecuali panah ke bawah tidak diganti.

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

dan ini kode jquerynya

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

toggle jquery
person Allen    schedule 10.09.2012    source sumber
comment
ID tidak boleh dimulai dengan angka.   -  person meder omuraliev    schedule 10.09.2012
comment
mengapa Anda menggunakan # di id apakah ada alasan menggunakan ini?   -  person NullPoiиteя    schedule 10.09.2012

Jawaban (6)


arrow_upward
2
arrow_downward

Anda tidak menugaskannya kembali ke src, coba:

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

arrow_upward
2
arrow_downward

Lebih sedikit kode lebih baik.

HTML

<a href="/id#" 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

arrow_upward
2
arrow_downward

Anda harus menggunakan sesuatu seperti;

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

Berikut adalah demo langsung.

person Alfred    schedule 10.09.2012

arrow_upward
0
arrow_downward

Saya pikir Anda harus mencoba jQuery.UI.toggleSwitch()

person Sender    schedule 10.09.2012

arrow_upward
0
arrow_downward

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

Coba yang ini

person Mahesh    schedule 24.05.2013

arrow_upward
0
arrow_downward 

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

solusi mudah lainnya mungkin dapat membantu seseorang;)

person salah    schedule 16.07.2013