有沒有更快捷的方式來編寫這個簡單的jQuery命令？

我更喜歡使用.slideToggle和3行代碼，但不知道如何讓腳本在滑動打開後「刷新」自身，並在滑回時返回原始狀態（不滑回當我使用3行和一個.slideToggle）。對不好的技術解釋抱歉。有沒有更快捷的方式來編寫這個簡單的jQuery命令？

$('#showHide').hide(); 

$('a#slickShow').click(function() { 
    $('#showHide').show(400); 
    $('.archiveText2 a').replaceWith('<a id="slickShow" href="#">View less Blog Entries<span class="archiveLink2">{</span></a>'); 

$('a#slickShow').click(function() { 
    $('#showHide').hide(400); 
    $('.archiveText2 a').replaceWith('<a id="slickShow" href="#">View more Blog Entries<span class="archiveLink2">}</span></a>');

這是工作

$('#showHide').hide(); 

$('#slickShow').click(function(){ 

    $('#showHide').slideToggle(400, function() { 
     if ($('#showHide').is(':visible')){ 
      $('.archiveText2 a').html('View less Blog Entries<span class="archiveLink2">{</span>'); 

     } 
     else{ 
      $('.archiveText2 a').html('View more Blog Entries<span class="archiveLink2">}</span>'); 
     } 

    }); 

    return false; 
});

來源

2010-09-23 Dan

至於我能理解它的代碼，最終得到了它，試試這個：

$('a#slickShow').click(function(){ 
    $('#showHide').slideToggle(400); 

    if ($('#showHide').is(':visible')){ 
    $('.archiveText2 a').replaceWith('<a id="slickShow" href="#">View less Blog Entries<span class="archiveLink2">{</span></a>'); 
    } 
    else{ 
    $('.archiveText2 a').replaceWith('<a id="slickShow" href="#">View more Blog Entries<span class="archiveLink2">}</span></a>'); 
    } 

    return false; 
});

來源

2010-09-23 17:20:25 Sarfraz

這不滑回再次，雖然，這是我當我試圖一個if/else語句的麻煩，它滑下，完美替代文本，但隨後的鏈接不會將它滑回去，它只會死掉 – Dan 2010-09-23 17:38:55

@Dan：添加'return false'行，查看我的更新回答。 – Sarfraz 2010-09-23 18:01:54

感謝您的幫助，但仍然不會滑動？ – Dan 2010-09-23 18:41:48

$('#showHide').hide(); 


$('a#slickShow').toggle(
     function(){ 
      $('#showHide').show(400); 
      $('.archiveText2 a').replaceWith('<a id="slickShow" href="#">View less Blog Entries<span class="archiveLink2">{</span></a>'); 
     }, 
     function(){ 
      $('#showHide').hide(400); 
      $('.archiveText2 a').replaceWith('<a id="slickShow" href="#">View more Blog Entries<span class="archiveLink2">}</span></a>'); 
     } 
);

來源

2010-09-23 17:21:38 trrrrrrm

看起來，你是當你需要做的是替換錨點內的html時，替換整個錨點。 .toggle（）可用於設置可用於交替點擊的功能。您也可以從'a＃slickShow'選擇器中刪除'a'，因爲ID查找本身會更快。

$("#slickshow").toggle(
    function() { 
    $(this).show(400).html("View less Blog Entries<span class="archiveLink2">{</span>"); 
    }, 
    function() { 
    $(this).hide(400).html("View more Blog Entries<span class="archiveLink2">}</span>"); 
    });

乾杯， awirick

來源

2010-09-23 17:22:41

感謝您的幫助，我放棄了'a'。我現在可以看到我不需要替換整個錨點，但無法使'.html'工作？ – Dan 2010-09-23 23:05:47

現在就開始工作，非常感謝您的建議 – Dan 2010-09-24 19:47:09

有沒有更快捷的方式來編寫這個簡單的jQuery命令？

回答

相關問題