Question

我有一个代码打印出几个按钮，具体取决于多少＆＃34;答案＆＃34;在我的页面上。但是，我希望按钮具有应该在按下按钮时显示属于每个答案的文本的功能。

问题在于，当我进入网站时，每个答案的文本都已显示，我希望它在我点击按钮时隐藏并显示。问题是当我按下任何按钮时，每个按钮都会切换，我希望每个按钮都是分开的。我有一个图像，我想用作按钮，并能够点击图像，但由于我没有设法修复它我使用按钮内的图像。我在很多网站上搜索过帮助，但我没有设法做到这一点......

我可能会错过一些CSS，还有其他缺少的代码吗？

＆＃13;

<style>
.question-wrap{margin-bottom: 2em}
p.answer{display: none}
</style>

＆＃13;

<script>
$("button.answer-toggle").click(function(){
    $(this).closest('.question-wrap').find('.answer').toggle();
    // Tested with the one above and below at the same time and then one at a time.
    $(this).next().toggle();
});
</script>

＆＃13;

while($row = mysqli_fetch_array($result))
{
echo "<div class='question-wrap'><b><small>Dilemma ".$row['qid']." - Answer ". $row['aid'].":</small></b> ". $row['points']." of 10 <b><small>points</small></b>
    <button class='answer-toggle'><input type='image' title='Information' src='img/down.png' width='13' height='10'></button>
    <p class='answer'>Answer text.</p></div>
    <br>";	
}

＆＃13;

Answer 1

对于初学者来说，通常最好将重复模块包装在自己的容器中。这有助于批量实例特定遍历和css

<div class="question-wrap">
   <button class="answer-toggle"></button>
   <p class="answer"></p>
</div>

然后，对于单击处理程序，您可以使用多个不同的遍历来隔离特定于实例的元素。

$("button.answer-toggle").click(function(){
    $(this).closest('.question-wrap').find('.answer').toggle();
    // OR
    $(this).next().toggle();
});

CSS

.question-wrap{margin-bottom: 2em}
p.answer{display: none}

单独预先隐藏按钮和图像作为按钮

1 个答案: