我有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>
答案 0 :(得分：3)
问题是您正在选择要隐藏/显示的类名称的元素，这样做会将效果应用于具有所选类名称的所有元素，以解决您可以使用的问题。以下方法：
$(this).parent().hide()之所以可以这样做，是因为
您要隐藏的是被单击按钮的第一父级。$(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>
您可以在以下链接中找到所用方法的文档：
parents（）：https://api.jquery.com/parents/
parent（）：https://api.jquery.com/parent/
find（）：https://api.jquery.com/find/