与特定的阶级和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

回答

相关问题