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

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

javascript jquery html

Javascript 如何在用户响应后隐藏所有元素,javascript,jquery,html,Javascript,Jquery,Html,我不知道我做得对不对，对不起，我是新来的。但问题是，当我点击第三个答案时，没有任何东西会消失，当我点击第二个答案时，只有第三个答案会消失，但我希望所有东西都能准确地显示出当我点击第一个答案时是如何发生的 <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.

我不知道我做得对不对，对不起，我是新来的。但问题是，当我点击第三个答案时，没有任何东西会消失，当我点击第二个答案时，只有第三个答案会消失，但我希望所有东西都能准确地显示出当我点击第一个答案时是如何发生的

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


$（文档）.ready（函数（）{
$（'.p'）。单击（函数（）
{
var response=$（this.parent（）.data（“特定”）；
$（this）.append（response）；
$（this.sides（）.remove（）；
});
});


第一个问题
第一个答案
<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>

第二个答案
第三个答案

您的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>


第一个问题
第一个答案
<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>

第二个答案
第三个答案

和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>


$（文档）.ready（函数（）{
$（'.p'）。单击（函数（）
{
var$parent=$（this.parent（）；
var响应=$parent.data（“特定”）；
$（this）.append（response）；
//用class=answers隐藏所有div
$parent.sides（'.answers'）.remove（）；
});
});

是您想要的吗

所以我补充说

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

并修改HTML，使其结构正确

编辑

Bhushan Kawadkar的答案更简单，请使用它。

您的具体要求是什么？从这个问题上看，你不清楚自己到底想要达到什么目标？修复你的div；它们嵌套不正确。你说的“消失”是什么意思？？删除它或只是隐藏它？这是因为你有一个下一个

div

答案结构，

兄弟姐妹（）

在这里不起作用我想在按下答案时删除所有内容，但第二个和第三个答案不起作用，而且divs fixed也不会改变任何东西如果你这样做，它会起作用。还有一个问题：如果我想让它递归（当我点击first answer时，会有3种方法可供选择，而不是first respone等等），我应该修改div吗？是的，你可以这样做，只需要添加相同的

，我试过了，但仍然不起作用，很抱歉问你这么多，但是你介意告诉我我在这段代码中做错了什么吗