使用jquery隱藏/顯示動態添加內容的最佳方式

我試圖創建一種工作方式來顯示/摺疊動態添加的內容。我使用rel標籤來檢測應該顯示哪個索引和描述大小。我已經列入了我的例子，使我的問題更容易理解。但是，我的解決方案不起作用，因爲它最終只顯示「完整」文本版本。使用jquery隱藏/顯示動態添加內容的最佳方式

這裏低於

HTML鏈接到我的示例

http://jsfiddle.net/rowej/z5wTj/15/

或代碼是：

<span id="11_fulltext" rel="11"><p> full text area </p> 
    <a href="#" class="switch" rel="big">Toggle</a> 
</span> 

<span id="11_smalltext" rel="11"> 
    <p> small text area</p> 
    <a href="#" class="switch" rel="small">Toggle</a> 
</span>

Jquery的（有載）：

$(".switch").click(function(e){ 
    e.preventDefault(); 
    var index=$(this).closest('span').attr('rel'); 
    var bigorsmall=$(this).attr('rel'); 

    alert(index+bigorsmall); 
    if(bigorsmall="big"){ 
    $('#'+index+'_fulltext').hide(); 
    $('#'+index+'_smalltext').show();  
    } 

    if(bigorsmall="small"){ 
    $('#'+index+'_smalltext').hide(); 
    $('#'+index+'_fulltext').show(); 
    } 
});

正在使用像這樣的rel標籤好嗎？謝謝任何幫助或建議！

來源

2012-01-09 CI_Guy

檢查你的代碼，

if(bigorsmall="big"){

永遠是truthy（你缺少的extra = sign）

if(bigorsmall=="big"){

同爲第二部分

if(bigorsmall="small"){應該if(bigorsmall=="small"){

來源

2012-01-09 18:01:59 Aknosis

-1

小和大似乎是東西的樣式，所以我只是爲它添加一個類。

您應該使用data-attributes：

<span id="11_fulltext" data-index="11"><p> full text area </p> 
    <a href="#" class="switch big">Toggle</a> 
</span> 
<span id="11_smalltext" data-index="11"> 
    <p> small text area</p> 
    <a href="#" class="switch small">Toggle</a> 
</span>

而且你可以通過執行檢索.data()屬性：

$(element).data('index');

這不會按預期方式工作：

if(bigorsmall="big"){

它應該是：

if(bigorsmall=="big"){

什麼，你會得到的是這樣的：

$(".switch").click(function(e){ 
    e.preventDefault(); 

    var a = $(this); 

    var index = a.closest('span').data('index'); 

    if(a.hasClass('big')) { 
     $('#'+index+'_fulltext').hide(); // is an id starting with a number valid??? 
     $('#'+index+'_smalltext').show();  
    } else { 
     $('#'+index+'_smalltext').hide(); 
     $('#'+index+'_fulltext').show(); 
    } 
});

來源

2012-01-09 17:54:44 PeeHaa

它比你想象的要容易得多。Here is an updated Fiddle.

HTML：

<span> 
    <p>full text area</p> 
    <a href="javascript:;" class="switch">Toggle</a> 
</span> 
<span> 
    <p>small text area</p> 
    <a href="javascript:;" class="switch">Toggle</a> 
</span>

$(document).on('click', '.switch', function() { 
    $(this).prev().toggle(); 
});

該解決方案是動態地添加該格式的新文本區域兼容。使用$(document).on('click', '.switch'可讓您捕捉在偵聽器連接後創建的元素上的事件的點擊。 See jQuery .on() docs.

編輯：更新小提琴來動態地創建新的可切換的內容塊

來源

2012-01-09 18:02:24

感謝您的幫助，我看到這可以如何使用，但不是100％我想要的 – 2012-01-09 18:07:18

對不起，我一定誤解了你想要做的事情然後...... – 2012-01-09 18:09:18

對於你正在嘗試做的是什麼新的HTML 5的數據屬性意味着。您可以附加到像這樣的元素：

<a href="#" class="switch" data-size="big">Toggle</a>

，並獲得這樣的：

var bigorsmall=$(this).data('size');

這種方法使用JQuery，即使你有一箇舊的瀏覽器，我相信，不是100％肯定應該仍然工作雖然。

更改此：

if(bigorsmall="big"){ 
if(bigorsmall="small"){

此爲@Aknosis提到的，還有這個：

if(bigorsmall=="big"){ 
if(bigorsmall=="small"){

你需要雙等於作比較。

來源

2012-01-09 18:06:21

使用jquery隱藏/顯示動態添加內容的最佳方式

回答

相關問題