我想设置我的网站上部分使用切换按钮，将扩大一个段落。问题是，该功能在工作的第一个按钮，但在此之后的任何按钮不起作用。有任何想法吗？
这里是我的脚本
$(document).ready(function() {
$("#toggle").click(function() {
var elem = $("#toggle").text();
if (elem == "Read More") {
//Stuff to do when btn is in the read more state
$("#toggle").text("Read Less");
$("#text").slideDown();
} else {
//Stuff to do when btn is in the read less state
$("#toggle").text("Read More");
$("#text").slideUp();
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>WEIGHT LOSS</h2>
<span id="text" style="display: none"><p>Regular sauna use can reduce overall body fat. Near infrared light has been shown to decrease cellulite. NIR heat lamp saunas allow specific problem areas to be targeted as needed. (E.g. cellulite in thigh skin). A study involving a group of women riding stationary bicycles demonstrated a 444% increase in weight loss for the group exposed to near infrared light when compared to the exercise only group. Infrared light combined with other therapies has been shown to be effective in controlling cellulite.</p>
<p>A two-phase, sauna weight loss study conducted by Binghamton University in New York revealed that an increase in core body temperature resulted in a decrease in body fat. It concluded that people who used an infrared sauna three times a week for 30 minutes per session dropped an average of 4 percent body fat over a four-month period. For a 175-pound man, that represents a weight reduction of seven pounds.</p>
<p>Participants who experienced infrared sauna weight loss did not change their exercise or diet patterns during the study. Control groups in the study who did not use the sauna showed no drop in weight. The study findings illustrate the significant boost that infrared therapy provides for our weight loss goals.</p>
</span>
<div class="btn-container">
<button id="toggle">Read More</button>
</div>您可能有重复的ID
类和相对寻址而是使用
还可以使用的DIV，而不是跨越
$(function() {
$(".btn-container>button").on("click", function(e) {
var text = $(this).text();
if (text === "Read More") {
//Stuff to do when btn is in the read more state
$(this).text("Read Less");
$(this).parent().prev(".text").slideDown();
} else {
//Stuff to do when btn is in the read less state
$(this).text("Read More");
$(this).parent().prev(".text").slideUp();
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>WEIGHT LOSS 1</h2>
<div class="text" style="display: none">
<p>Regular sauna use can reduce overall body fat. Near infrared light has been shown to decrease cellulite. NIR heat lamp saunas allow specific problem areas to be targeted as needed. (E.g. cellulite in thigh skin). A study involving a group of women riding
stationary bicycles demonstrated a 444% increase in weight loss for the group exposed to near infrared light when compared to the exercise only group. Infrared light combined with other therapies has been shown to be effective in controlling cellulite.</p>
<p>A two-phase, sauna weight loss study conducted by Binghamton University in New York revealed that an increase in core body temperature resulted in a decrease in body fat. It concluded that people who used an infrared sauna three times a week for 30
minutes per session dropped an average of 4 percent body fat over a four-month period. For a 175-pound man, that represents a weight reduction of seven pounds.</p>
<p>Participants who experienced infrared sauna weight loss did not change their exercise or diet patterns during the study. Control groups in the study who did not use the sauna showed no drop in weight. The study findings illustrate the significant boost
that infrared therapy provides for our weight loss goals.</p>
</div>
<div class="btn-container">
<button type="button">Read More</button>
</div>
<h2>WEIGHT LOSS 2 </h2>
<div class="text" style="display: none">
<p>Regular sauna use can reduce overall body fat. Near infrared light has been shown to decrease cellulite. NIR heat lamp saunas allow specific problem areas to be targeted as needed. (E.g. cellulite in thigh skin). A study involving a group of women riding
stationary bicycles demonstrated a 444% increase in weight loss for the group exposed to near infrared light when compared to the exercise only group. Infrared light combined with other therapies has been shown to be effective in controlling cellulite.</p>
<p>A two-phase, sauna weight loss study conducted by Binghamton University in New York revealed that an increase in core body temperature resulted in a decrease in body fat. It concluded that people who used an infrared sauna three times a week for 30
minutes per session dropped an average of 4 percent body fat over a four-month period. For a 175-pound man, that represents a weight reduction of seven pounds.</p>
<p>Participants who experienced infrared sauna weight loss did not change their exercise or diet patterns during the study. Control groups in the study who did not use the sauna showed no drop in weight. The study findings illustrate the significant boost
that infrared therapy provides for our weight loss goals.</p>
</div>
<div class="btn-container">
<button type="button">Read More</button>
</div>你有这个想法的权利，但在实施它已经有点不对劲。使用类是正确的 - > $点击（函数（）{}）;（ “切换”）。 。但里面使用的是类像ID在这里 - > $（ “＃切换”）文本（）;以及$（ “切换 ”）文本（“ 读减 ”）; $（“ ＃文本”）了slideDown（）;等等，而不是尝试使用$（本）和$（本）.find（ '＃文本'）来代替。
你被引用ID的元素，但ID必须是每个DOM元素独特。
当你想引用多个元素，你应该通过类这样做。
你还需要改变你如何在点击功能时，您中引用的元素。使用this确保你正在做的更改当前元素（一个被点击），而不是你的选择相匹配的任何元素。
为了能够控制与触发另一个元素，我建议你包裹其中的父元素（如div），让你可靠地确定要滑动特定元素。
<div>
<h2>WEIGHT LOSS</h2>
<span class="text" style="display: none"><p>Regular sauna use can reduce overall body fat. Near infrared light has been shown to decrease cellulite. NIR heat lamp saunas allow specific problem areas to be targeted as needed. (E.g. cellulite in thigh skin). A study involving a group of women riding stationary bicycles demonstrated a 444% increase in weight loss for the group exposed to near infrared light when compared to the exercise only group. Infrared light combined with other therapies has been shown to be effective in controlling cellulite.</p>
<p>A two-phase, sauna weight loss study conducted by Binghamton University in New York revealed that an increase in core body temperature resulted in a decrease in body fat. It concluded that people who used an infrared sauna three times a week for 30 minutes per session dropped an average of 4 percent body fat over a four-month period. For a 175-pound man, that represents a weight reduction of seven pounds.</p>
<p>Participants who experienced infrared sauna weight loss did not change their exercise or diet patterns during the study. Control groups in the study who did not use the sauna showed no drop in weight. The study findings illustrate the significant boost that infrared therapy provides for our weight loss goals.</p>
</span>
<div class="btn-container">
<button class="toggle">Read More</button>
</div>
$(document).ready(function() {
$(".toggle").click(function() {
var elem = $(this).text();
if (elem == "Read More") {
//Stuff to do when btn is in the read more state
$(this).text("Read Less");
$(this).parent().parent().children('.text').slideDown();
} else {
//Stuff to do when btn is in the read less state
$(this).text("Read More");
$(this).parent().parent().children('.text')..slideUp();
}
});
});
您正在使用id="toggle"引用按钮。 ID必须是唯一的。这就是为什么你选择只返回第一个值。为了解决这个问题，只需更改id到class像这样：
$(document).ready(function() {
$(".toggle").click(function() {
var elem = $(this).text();
if (elem == "Read More") {
//Stuff to do when btn is in the read more state
elem.text("Read Less");
$("#text").slideDown();
} else {
//Stuff to do when btn is in the read less state
elem.text("Read More");
$("#text").slideUp();
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>WEIGHT LOSS</h2>
<span id="text" style="display: none"><p>Regular sauna use can reduce overall body fat. Near infrared light has been shown to decrease cellulite. NIR heat lamp saunas allow specific problem areas to be targeted as needed. (E.g. cellulite in thigh skin). A study involving a group of women riding stationary bicycles demonstrated a 444% increase in weight loss for the group exposed to near infrared light when compared to the exercise only group. Infrared light combined with other therapies has been shown to be effective in controlling cellulite.</p>
<p>A two-phase, sauna weight loss study conducted by Binghamton University in New York revealed that an increase in core body temperature resulted in a decrease in body fat. It concluded that people who used an infrared sauna three times a week for 30 minutes per session dropped an average of 4 percent body fat over a four-month period. For a 175-pound man, that represents a weight reduction of seven pounds.</p>
<p>Participants who experienced infrared sauna weight loss did not change their exercise or diet patterns during the study. Control groups in the study who did not use the sauna showed no drop in weight. The study findings illustrate the significant boost that infrared therapy provides for our weight loss goals.</p>
</span>
<div class="btn-container">
<button class="toggle">Read More</button>
</div>您将需要改变的文本元素的选择，如果你打算有一个按钮控制自己的文本元素。