javascript - 如何在常见问题上设置个人 "Was this helpful?"调查？

标签 javascript html css

我在一页上有 36 个常见问题解答和答案。每个答案都包含在一个可折叠元素中。我的目标是让用户在常见问题解答中单击是或否，然后我通过 GTM/GA 跟踪该值。但是，当我当前单击是或否时，该值显示“感谢您的反馈”。提醒所有常见问题解答。

我知道这与我按类和按 id 使用元素的方式有关，但我不完全确定该怎么做。

我下面的代码片段显示了当前状态。

    $(document).ready(function() {
      $(".survey-submit").click(function() {
        $(".survey-alert").show();
        $(".survey").hide();
      });
    });
.survey-alert {
  display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
          <div class="row float-right text-center">
              <div class="col-sm-12">
                  <div class="survey">
                      <h6>Was this helpful?</h6>
                      <button class="btn btn-sm btn-secondary text-white mr-3 survey-submit">Yes</button>
                      <button class="btn btn-sm btn-secondary text-white survey-submit">No</button>
                  </div>
                  <div class="alert alert-success alert-dismissable survey-alert">
                      Thanks for your feedback.
                  </div>
              </div>
          </div>        
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
          <div class="row float-right text-center">
              <div class="col-sm-12">
                  <div class="survey">
                      <h6>Was this helpful?</h6>
                      <button class="btn btn-sm btn-secondary text-white mr-3 survey-submit">Yes</button>
                      <button class="btn btn-sm btn-secondary text-white survey-submit">No</button>
                  </div>
                  <div class="alert alert-success alert-dismissable survey-alert">
                      Thanks for your feedback.
                  </div>
              </div>
          </div>         
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
          <div class="row float-right text-center">
              <div class="col-sm-12">
                  <div class="survey">
                      <h6>Was this helpful?</h6>
                      <button class="btn btn-sm btn-secondary text-white mr-3 survey-submit">Yes</button>
                      <button class="btn btn-sm btn-secondary text-white survey-submit">No</button>
                  </div>
                  <div class="alert alert-success alert-dismissable survey-alert">
                      Thanks for your feedback.
                  </div>
              </div>
          </div>         
      </div>
    </div>
  </div>
</div>

最佳答案

问题是您正在选择要隐藏/显示的元素，正如您所想的那样，这样做会将效果应用于具有所选类名的所有元素，以解决您可以使用的问题以下方法:

  1. 选择当前点击按钮的第一个父级(类名为“survey”的 div)并使用以下方法隐藏它: $(this).parent().hide()这是可以做到的，因为元素 您要隐藏的是单击按钮的第一个父级。
  2. 选择被点击按钮的第二个父级，然后选择它的 具有“survey-alert”类名称的子元素并使用以下方式显示它: $(this).parents(':eq(1)').find(".survey-alert").show();

$(document).ready(function() {
      $(".survey-submit").click(function() {
       $(this).parents(':eq(1)').find( ".survey-alert" ).show();
        $(this).parent().hide();
      });
    });
.survey-alert {
  display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
          <div class="row float-right text-center">
              <div class="col-sm-12">
                  <div class="survey">
                      <h6>Was this helpful?</h6>
                      <button class="btn btn-sm btn-secondary text-white mr-3 survey-submit">Yes</button>
                      <button class="btn btn-sm btn-secondary text-white survey-submit">No</button>
                  </div>
                  <div class="alert alert-success alert-dismissable survey-alert">
                      Thanks for your feedback.
                  </div>
              </div>
          </div>        
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
          <div class="row float-right text-center">
              <div class="col-sm-12">
                  <div class="survey">
                      <h6>Was this helpful?</h6>
                      <button class="btn btn-sm btn-secondary text-white mr-3 survey-submit">Yes</button>
                      <button class="btn btn-sm btn-secondary text-white survey-submit">No</button>
                  </div>
                  <div class="alert alert-success alert-dismissable survey-alert">
                      Thanks for your feedback.
                  </div>
              </div>
          </div>         
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
          <div class="row float-right text-center">
              <div class="col-sm-12">
                  <div class="survey">
                      <h6>Was this helpful?</h6>
                      <button class="btn btn-sm btn-secondary text-white mr-3 survey-submit">Yes</button>
                      <button class="btn btn-sm btn-secondary text-white survey-submit">No</button>
                  </div>
                  <div class="alert alert-success alert-dismissable survey-alert">
                      Thanks for your feedback.
                  </div>
              </div>
          </div>         
      </div>
    </div>
  </div>
</div>

您可以在以下链接中找到所用方法的文档:

parent ():https://api.jquery.com/parents/

parent ():https://api.jquery.com/parent/

查找():https://api.jquery.com/find/

关于javascript - 如何在常见问题上设置个人 "Was this helpful?"调查？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56193684/

上一篇：javascript - Thymeleaf 加载 CSS 但不加载 Javascript

下一篇：javascript - 单击鼠标调整多个 div 的大小

相关文章：

javascript - 使用法语的 tablesorter 问题进行排序

java - 如何分配带有图像作为标签的 Richfaces 面板栏

jquery - 如何在一页上有 2 个固定标题？

javascript - 将表单数据存储到 json 文件中

javascript 执行时间太长，让观众等待太久

html - 在进度条背景上居中进度值

javascript - Vue 组件小计总和

javascript - jquery 单选按钮 :checked and $(this). 父级

javascript - 如何比较两个函数中定义的两个JavaScript变量值

具有放大和缩小功能的 jQuery 动画

©2024 IT工具网  联系我们