Question

我不知道我是否正确行事，抱歉我是新来的。但问题是，当我点击第3个答案时，没有任何消失，当我点击第二个答案时，只有第3个答案消失，但我希望一切都能消除我点击第一个答案时的确切情况

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
        $('.answers p').click(function()
        {
            var response = $(this).parent().data("specific");
                $(this).append(response);
            $(this).siblings().remove();
        });
        });
    </script>
</head>

<div class="question">
    <div class="question-text">
    <p>First question?</p>
    </div>
    <div class="answers" data-specific=" First Response">
    <p>First answer</p>
    <div class="answers" data-specific=" Second Response">
    <p>Second answer</p>
    <div class="answers" data-specific=" Third Response">
    <p>Third answer</p>
    </div>
    </div>
    </div>

</div>

Answer 1

你的HTML需要改变，因为你有嵌套形式的答案div但它应该在同一级别（据我所知）然后把你的逻辑隐藏在jQuery中作为showm

<div class="question">
    <div class="question-text">
      <p>First question?</p>
    </div>
    <div class="answers" data-specific=" First Response">
      <p>First answer</p>
    </div><!--close your div here-->
    <div class="answers" data-specific=" Second Response">
      <p>Second answer</p>
    </div><!--close your div here-->
    <div class="answers" data-specific=" Third Response">
      <p>Third answer</p>
    </div><!--close your div here-->
</div>

和jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
     $(document).ready(function(){
            $('.answers p').click(function()
            {
                var $parent = $(this).parent(); 
                var response = $parent.data("specific");
                $(this).append(response);
                //hide all div with class=answers
                $parent.siblings('.answers').remove();
            });
      });
   </script>

Answer 2

this你想要的是什么吗？

所以我添加了

$(this).parent().parent().children().each(function(){
  if(!($(this).hasClass('question-text') || $(this).data('specific') === response))
    $(this).remove();
});

修改了HTML，使其结构合理。

修改

Bhushan Kawadkar的回答更简单，请改用它。

如何在用户响应后隐藏所有元素

2 个答案: