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

Question

我在一页上有 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>

Answer 1

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

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/