Question

我正在尝试在网站上设置一个部分以使用切换按钮来展开一个段落。问题是，该功能在第一个按钮上起作用，但是此后的任何按钮都不起作用。有什么想法吗？

这是我的剧本

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

Answer 1

您正在使用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>

如果您打算让按钮来控制其自己的文本元素，则需要更改文本元素的选择器。

Answer 2

您正在按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();
    }
  });
});

Answer 3

您可能有重复的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>

Answer 4

您的想法正确，但是在实施过程中并没有出错。使用类是正确的-> $（“。toggle”）。click（function（）{}）;但是在内部，您使用的是像id这样的类-> $（“＃toggle”）。text（）;和$（“。toggle”）。text（“ Read Less”）; $（“＃text”）。slideDown（）;和等等，请尝试改用$（this）和$（this）.find（'＃text'）。

为什么我的JavaScript函数无法在整个页面中正常工作

4 个答案: