與特定的階級和toggleClass

，我在下面的例子中使用toggleClass像jQuery的文檔頁面上創建一個「更多」 /「讀少」的解決方案使用的事件ID是我使用的HTML代碼：與特定的階級和toggleClass

<span id="block1-link" class="read-more-text more">Read More</span> 
<span id="block1-content" class="sh-content">1st paragraph text<span class="read-more-text"> Hide Text</span></span> 

<span id="block2-link" class="read-more-text more">Read More</span> 
<span id="block2-content" class="sh-content">2nd paragraph text<span class="read-more-text"> Hide Text</span></span>

和伴隨的jQuery：

(function ($) { 
     $(".read-more-text").click(function() { 
      $(".sh-content").toggleClass("show-text"); 
      $(".read-more-text.more").toggleClass("hide-text"); 
     }); 
    }(jQuery));

現在，當我點擊「Read More」鏈接時，代碼顯示兩個文本塊。我想點擊只會影響相關的「塊」。所以，如果我用「block1-link」點擊量程，應該切換「block1-content」的量程。

我不直接將ID添加到我的jQuery代碼的原因是因爲這需要適用於頁面上任意數量的鏈接/內容分組。

我敢肯定，這是顯而易見的東西我失蹤。我希望有人能幫我糾正我寫的東西。

謝謝！

來源

2015-02-10 Yazmin

試試這個。你可以使用jQuery的.on（）。

$(".read-more-text").on("click", function() { 
    $(this).next().toggleClass("show-text"); 
    $(this).toggleClass("hide-text"); 
});

編輯：關於同一主題的進一步發展，我調整了HTML類，以便它更清潔和更容易。

<span id="block1-link" class="read-more">Read More</span> 

<span id="block1-content" class="sh-content">1st paragraph text<span class="hide-more"> Hide Text</span> 
</span> 

<span id="block2-link" class="read-more">Read More</span> 

<span id="block2-content" class="sh-content">2nd paragraph text<span class="hide-more"> Hide Text</span></span> 

$(".read-more").on("click", function() { 
    $(this).next().toggleClass("show-text"); 
    $(this).toggleClass("hide-text"); 
}); 

$(".hide-more").on("click", function() { 
    $(this).parent().toggleClass("hide-text"); 
    $(this).parent().prev().toggleClass("show-text"); 
});

來源

2015-02-10 04:05:57 minion

這個工作，但然後打破「隱藏文字」鏈接。 – Yazmin 2015-02-10 22:32:26

看看我的編輯。 – minion 2015-02-11 01:33:03

謝謝。一旦我在「隱藏更多」點擊切換了切換的類，這個工作就完美了。 – Yazmin 2015-02-11 20:10:59

您可以使用當前元素點擊背景this只針對點擊，接下來的div元素：

$(".read-more-text").click(function() { 
     $(this).next().toggleClass("show-text"); 
     $(this).toggleClass("hide-text"); 
    });

來源

2015-02-10 03:58:26

這是有效的，但隨後打破了「隱藏文本」鏈接。 – Yazmin 2015-02-10 22:33:12

與特定的階級和toggleClass

回答

相關問題