我正在新闻网站上工作并试图通过点击按钮显示新闻文章的全部内容。我的代码是
<script>
$(document).ready(function(){
$("#toggle-news-content").click(function(){
$("#news-content").fadeToggle(300);
if($("#toggle-news-content").text()=="More")
$("#toggle-news-content").text("Less");
else
$("#toggle-news-content").text("More");
});
});
</script>
<div id="news-heading"><h3>news 2 heading</h3></div>
<div id="news-content" class="news-content">news 2 content</div>
<button id="toggle-news-content">More</button>
<div id="news-heading"><h3>news 2 heading</h3></div>
<div id="news-content" class="news-content">news 2 content</div>
<button id="toggle-news-content">More</button>
问题是，当我点击新闻1的“更多”按钮时，脚本正在运行。但是当我点击新闻2的“更多”按钮时，它什么也没做。 由于新闻动态的数量可能会不时变化。任何人都可以调试此代码（这里我显示导致问题的代码）
答案 0 :(得分：-1)
首先，您在多个元素中使用相同的ID。你不应该这样做，因为id被设计为在DOM中是唯一的。改为上课......
<div class="news-heading"><h3>news 2 heading</h3></div>
<div class="news-content">news 2 content</div>
<button class="toggle-news-content">More</button>
<div class="news-heading"><h3>news 2 heading</h3></div>
<div class="news-content">news 2 content</div>
<button class="toggle-news-content">More</button>
然后，当您点击某个按钮时，您必须选择其相关的div.news-content，因为这是您要显示/隐藏的内容。您可以使用prev() ...
$(".toggle-news-content").click(function() {
$(this).prev("div.news-content").fadeToggle(300);
$(this).text($(this).text() == "More" ? 'Less' : "More");
});
我希望它有所帮助
答案 1 :(得分：-1)
id应该是唯一的，而是使用类。
然后在函数内部，您可以使用$(this)来操纵受影响的元素。
请注意，它现在隐藏了内容并显示了LESS。我会改变它。
$(document).ready(function() {
$(".toggle-news-content").click(function() {
$(this).prev('.news-content').fadeToggle(300);
if ($(this).text() == "More")
$(this).text("Less");
else
$(this).text("More");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="news-heading">
<h3>news 2 heading</h3>
</div>
<div id="news-content1" class="news-content">news 2 content</div>
<button class="toggle-news-content">More</button>
<div class="news-heading">
<h3>news 2 heading</h3>
</div>
<div id="news-content2" class="news-content">news 2 content</div>
<button class="toggle-news-content">More</button>
答案 2 :(得分：-1)
这是您问题最简单，最优雅的解决方案。我更改了课程的按钮ID，并使用三元操作员进行html()切换：
$(document).ready(function() {
$(".toggle-news-content").click(function() {
$(this).prev(".news-content").fadeToggle(300);
$(this).html() == "More" ? $(this).html('Less') : $(this).html('More');
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="news-heading"><h3>news 2 heading</h3></div>
<div id="news-content" class="news-content">news 2 content</div>
<button class="toggle-news-content">More</button>
<div id="news-heading"><h3>news 2 heading</h3></div>
<div id="news-content" class="news-content">news 2 content</div>
<button class="toggle-news-content">More</button>
答案 3 :(得分：-1)
您的网页上应该使用唯一的 ID 来代替。
您有动态内容新闻添加到您的网页使用 jquery on处理程序与click事件。
.on（events [，selector] [，data]，handler）
它也可以处理动态内容的事件。
$(document).ready(function() {
$(".toggle-news-content").on("click", function() {
$(this).prev(".news-content").fadeToggle(300);
if ($(this).text() == "More"){
$(this).text("Less");
}
else
$(this).text("More");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="news-heading1">
<h3>news 2 heading</h3>
</div>
<div id="news-content1" class="news-content">news 2 content</div>
<button class="toggle-news-content">More</button>
<div id="news-heading2">
<h3>news 2 heading</h3>
</div>
<div id="news-content2" class="news-content">news 2 content</div>
<button class="toggle-news-content">More</button>
答案 4 :(得分：-1)
首先，您不应该在两个或更多元素中使用相同的id，您应该使用class
将id="news-heading"替换为class="news-heading"
和id="toggle-news-content"与class="toggle-news-content"
然后，它非常简单，使用这个脚本：
$(function() {
$(".toggle-news-content").click(function() {
var content = $(this).prev();
$(this).text(content.is(':visible')?'Show':'Less');
content.toggle();
});
});