Question

我正在尝试使用问题和答案构建一个简单的网页，结构看起来像这样：

<div class="Q">Question goes here</div>
<div class="A">Answer goes here</div>

<div class="Q">Question goes here</div>
<div class="A">Answer goes here</div>

<div class="Q">Question goes here</div>
<div class="A">Answer goes here</div>

<div class="Q">Question goes here</div>
<div class="A">Answer goes here</div>

etc

当页面加载时，答案被隐藏（在CSS中很容易完成）。我希望能够点击任何给定的问题，并显示该问题的答案，并只显示该问题的答案。另一方面，我现在不想使用ID。我试图做的是什么？

这就是我现在所拥有的：

$(document).ready(function () {
    $('.Q').click(function(e) {
      function toggle() {
        $(".Q").next().toggle();
      }
    });
});

我应该怎么做？最好是简单来说，因为我的编程技巧非常适合初学者。如果有人知道任何类似的例子，那就太棒了（我只能找到使用id的示例，或者适用于所有类似元素的示例......）

提前致谢！

Answer 1

是的，你可以用jQuery来做。您需要将每个对分组为父div，并在单击时将div传递给函数。然后，我们可以找到该特定孩子的答案并展示它。您的代码应如下所示：

用于问答的HTML。您可以根据需要添加任意数量。

<div onclick="showAns($(this))">
    <div class="Q">Question 1</div>
    <div class="A">Answer 1</div>
</div>
<div onclick="showAns($(this))">
    <div class="Q">Question 2</div>
    <div class="A">Answer 2</div>
</div>

的JavaScript / Jquery的：

<script>
    function showAns(v){
        v.find(".A").css('display','block');
    }
</script>

CSS在开头隐藏答案：

<style>
    .A{
        display:none;
    }
</style>

单击前一个div时，在jquery中切换div的可见性

1 个答案: