Question

$(document).ready(function(){
    $("button").click(function(){
        $("#answer").toggle(1000);
    });
});

这仅适用于ID "answer"和"button"，这对我来说是一个挑战，它可以获得多对这些ID（answer1 - button1, answer2 - button2，等等）来处理这个单一的函数< / p>

Answer 1

您尚未包含相关的HTML，因此我只能猜测/假设我的演示/示例中的内容。

对于多个元素，最好使用class对它们进行分组。

$(document).ready(function() {
  $(".answerTog").click(function() {
    $(this).prev('.answer').toggle(1000);
  });
});

.Question {
  display: block;
  margin-bottom: 5px;
}

.answer {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Question">
  <input type="text" placeholder="Question One" />
  <span class="answer">Question One Answer.</span>
  <button class="answerTog">See Answer</button>
</div>
<div class="Question">
  <input type="text" placeholder="Question Two" />
  <span class="answer">Question Two Answer.</span>
  <button class="answerTog">See Answer</button>
</div>
<div class="Question">
  <input type="text" placeholder="Question Three" />
  <span class="answer">Question Three Answer.</span>
  <button class="answerTog">See Answer</button>
</div>

如果您的按钮在答案之前，那么您只需使用

即可

$(this).next('.answer').toggle(1000);

$(this)将定位用于触发函数调用的特定元素，在此实例中单击该按钮。

.prev('.answer')将使用class名称answer

上一个

.next('.answer')将使用class名称answer

下一个

JsFiddle Demo

如果您对上述源代码有任何疑问，请在下面留言，我会尽快给您回复。

我希望这会有所帮助。快乐的编码！

Answer 2

您当前正在使用ID属性来调用该按钮（$('#')）您希望按类调用它们。

ID应该是唯一的，仅用于1个DOM元素。

尝试使用ID脚本只会选择它遇到的第一个元素;并且代码仅适用于那个按钮。

使用类为所有元素创建一个Object，使用jQuery只需要按类调用元素，并正常运行代码 - 我注意到这一点，因为在JS中你必须将索引添加到元素中调用

例如：

<canvas id="main"></canvas>

<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<script>
  var canvas = $('#main'), // return 1 element
      elements = $('.elem'); // return 3 elements
</script>

因此，对于涉及多个元素的任何内容，您必须按类或标记名称调用它们。

在vanilla JS中你会看到类似这样的东西：

<script>
  var elem = document.querySelectorAll('.elem');
  console.log(elem[0]);
</script>

因此，您的代码只需要按类调用这些元素;并且您可以为不同目的设置自定义类。

$(document).ready(function() {
  var btns = $('.btn');
  btns.click(function() {
      btns.toggle(1000);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">Button</button>
<button class="btn">Button</button>
<button class="btn">Button</button>
<button class="btn">Button</button>
<button class="btn">Button</button>

多个切换按钮和具有单个功能的文本

2 个答案: