Javascript 使用按钮隐藏/显示div的内容

我正在一个新闻网站上工作，试图通过点击按钮来显示新闻文章的全部内容。我的代码是

<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>

$（文档）.ready（函数（）{
$（“#切换新闻内容”）。单击（函数（）{
$（“#新闻内容”）.fadeToggle（300）；
如果（$（“#切换新闻内容”）.text（）=“更多”）
$（“#切换新闻内容”）.text（“较少”）；
其他的
$（“#切换新闻内容”）.text（“更多”）；
});
});
新闻2标题
新闻2内容
更多
新闻2标题
新闻2内容
更多

问题是当我点击新闻1的“更多”按钮时，脚本正在工作。但当我点击新闻2的“更多”按钮时，它什么也没做。

---

由于新闻的数量是动态的，因此可能会不时发生变化。任何人都可以调试这段代码（这里我展示了导致问题的代码）

首先，您在多个元素中使用了相同的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>

---

我希望它有帮助

一个

id

应该是唯一的，而不是使用类

然后在函数内部，您可以使用

$（this）

操作受影响的元素

请注意，它现在隐藏内容并显示较少的内容。我想换一个

$（文档）.ready（函数（）{
$（“.toggle news content”）。单击（函数（）{
$（this.prev（“.news content”）.fadeToggle（300）；
如果（$（this）.text（）=“更多”）
$（本）.text（“减去”）；
其他的
$（此）.text（“更多”）；
});
});

新闻2标题
新闻2内容
更多
新闻2标题
新闻2内容
更多
这是解决您的问题最简单、最优雅的方法。我更改了类的按钮ID，并使用三值运算符进行了
html（）
切换：


$（文档）.ready（函数（）{
$（“.toggle news content”）。单击（函数（）{
$（this.prev（“.news content”）.fadeToggle（300）；
$（this.html（）==“More”？$（this.html（'Less'）：$（this.html（'More'）；
});
});

新闻2标题
新闻2内容
更多
新闻2标题
新闻2内容
更多
您的网页上应该有唯一的id，而不是使用类

您有dynamic内容新闻添加到您的网页使用jquery点击事件处理程序

.on（事件[，选择器][，数据]，处理程序）

它还可以处理动态内容的事件


$（文档）.ready（函数（）{
$（“.toggle news content”）。打开（“单击”，函数（）{
$（this.prev（“.news content”）.fadeToggle（300）；
如果（$（this）.text（）=“更多”）{
$（本）.text（“减去”）；
}
其他的
$（此）.text（“更多”）；
});
});

新闻2标题
新闻2内容
更多
新闻2标题
新闻2内容
更多
首先，您不应该在两个或多个元素中有相同的
id
，您应该使用
class

将
id=“news heading”
替换为
class=“news heading”

使用
class=“toggle news content”

然后，非常简单，使用以下脚本：

$(function() {
    $(".toggle-news-content").click(function() {
        var content = $(this).prev();
        $(this).text(content.is(':visible')?'Show':'Less');
        content.toggle();
    });
});

你不可能知道为什么我的正确且经过测试的答案会被否决（为什么这里所有的答案都被否决了？我们都会帮助提问者。也许我们没有搜索重复的问题。。。
$(function() {
    $(".toggle-news-content").click(function() {
        var content = $(this).prev();
        $(this).text(content.is(':visible')?'Show':'Less');
        content.toggle();
    });
});