我有两个Bootstrap手风琴。每个手风琴都通过JQuery发生了很多事情。但是，当我单击一个Accoridion时，两个都同时应用了我编写的JQuery，我希望它们一次发生一次。我提供了一个Codepen。
我想在两个面板上使用相同的JQuery，因此不必在JQuery中两次编写相同的代码。
这是我的Codepen。
https://codepen.io/sazad/pen/XPWXYR
<div class="col-12 col-sm-6 col-md-3">
<label class="switch">
<input type="checkbox" class="notify-check">
<span class="slider round"></span>
</label>
<div class="disabled-overlay"></div>
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<button class="btn btn-title center" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">PRICE <i class="caret-icon fas fa-caret-down hide"></i>
</button>
<div class="btn-text-display center hide">Every 15 Minutes</div>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<div class="btn-freq-group">
<label for="select-list">Frequency</label>
<select class="form-control freq-btn" onfocus='this.size=4;' onblur='this.size=1;' onchange='this.size=1; this.blur();'id="select-list">
<option selected="selected" value="every 15 minutes">Every 15 Minutes</option>
<option value="hourly">Hourly</option>
<option value="twice daily">Twice Daily</option>
<option value="weekly">Weekly</option>
</select>
</div>
<div class="twice-daily-btn hide">
<label for="time-one">Select First Time:</label>
<select onfocus='this.size=4;' onblur='this.size=1;' onchange='this.size=1; this.blur();' class="form-control" id="time-one">
<option selected="selected">12 AM</option>
<option>1 AM</option>
<option>2 AM</option>
<option>3 AM</option>
<option>4 AM</option>
<option>5 AM</option>
<option>6 AM</option>
<option>7 AM</option>
<option>8 AM</option>
<option>9 AM</option>
<option>10 AM</option>
<option>11 AM</option>
<option>12 PM</option>
<option>1 PM</option>
<option>2 PM</option>
<option>3 PM</option>
<option>4 PM</option>
<option>5 PM</option>
<option>6 PM</option>
<option>7 PM</option>
<option>8 PM</option>
<option>9 PM</option>
<option>10 PM</option>
<option>11 PM</option>
</select>
<label for="time-two">Select Second Time:</label>
<select onfocus='this.size=4;' onblur='this.size=1;' onchange='this.size=1; this.blur();' class="form-control" id="time-two">
<option>12 AM</option>
<option>1 AM</option>
<option>2 AM</option>
<option>3 AM</option>
<option>4 AM</option>
<option>5 AM</option>
<option>6 AM</option>
<option>7 AM</option>
<option>8 AM</option>
<option>9 AM</option>
<option>10 AM</option>
<option>11 AM</option>
<option selected="selected">12 PM</option>
<option>1 PM</option>
<option>2 PM</option>
<option>3 PM</option>
<option>4 PM</option>
<option>5 PM</option>
<option>6 PM</option>
<option>7 PM</option>
<option>8 PM</option>
<option>9 PM</option>
<option>10 PM</option>
<option>11 PM</option>
</select>
</div>
<div class="weekly hide">
<label for="day">Select A Day:</label>
<select onfocus='this.size=4;' onblur='this.size=1;' onchange='this.size=1; this.blur();' class="form-control" id="day">
<option selected="selected">Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
<option>Sunday</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<label class="switch">
<input type="checkbox" class="notify-check">
<span class="slider round"></span>
</label>
<div class="disabled-overlay"></div>
<div id="accordion2">
<div class="card">
<div class="card-header" id="headingTwo">
<button class="btn btn-title center" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">PRICE <i class="caret-icon fas fa-caret-down hide"></i>
</button>
<div class="btn-text-display center hide">Every 15 Minutes</div>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion2">
<div class="card-body">
<div class="btn-freq-group">
<label for="select-list">Frequency</label>
<select class="form-control freq-btn" onfocus='this.size=4;' onblur='this.size=1;' onchange='this.size=1; this.blur();'id="select-list">
<option selected="selected" value="every 15 minutes">Every 15 Minutes</option>
<option value="hourly">Hourly</option>
<option value="twice daily">Twice Daily</option>
<option value="weekly">Weekly</option>
</select>
</div>
<div class="twice-daily-btn hide">
<label for="time-one">Select First Time:</label>
<select onfocus='this.size=4;' onblur='this.size=1;' onchange='this.size=1; this.blur();' class="form-control" id="time-one">
<option selected="selected">12 AM</option>
<option>1 AM</option>
<option>2 AM</option>
<option>3 AM</option>
<option>4 AM</option>
<option>5 AM</option>
<option>6 AM</option>
<option>7 AM</option>
<option>8 AM</option>
<option>9 AM</option>
<option>10 AM</option>
<option>11 AM</option>
<option>12 PM</option>
<option>1 PM</option>
<option>2 PM</option>
<option>3 PM</option>
<option>4 PM</option>
<option>5 PM</option>
<option>6 PM</option>
<option>7 PM</option>
<option>8 PM</option>
<option>9 PM</option>
<option>10 PM</option>
<option>11 PM</option>
</select>
<label for="time-two">Select Second Time:</label>
<select onfocus='this.size=4;' onblur='this.size=1;' onchange='this.size=1; this.blur();' class="form-control" id="time-two">
<option>12 AM</option>
<option>1 AM</option>
<option>2 AM</option>
<option>3 AM</option>
<option>4 AM</option>
<option>5 AM</option>
<option>6 AM</option>
<option>7 AM</option>
<option>8 AM</option>
<option>9 AM</option>
<option>10 AM</option>
<option>11 AM</option>
<option selected="selected">12 PM</option>
<option>1 PM</option>
<option>2 PM</option>
<option>3 PM</option>
<option>4 PM</option>
<option>5 PM</option>
<option>6 PM</option>
<option>7 PM</option>
<option>8 PM</option>
<option>9 PM</option>
<option>10 PM</option>
<option>11 PM</option>
</select>
</div>
<div class="weekly hide">
<label for="day">Select A Day:</label>
<select onfocus='this.size=4;' onblur='this.size=1;' onchange='this.size=1; this.blur();' class="form-control" id="day">
<option selected="selected">Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
<option>Sunday</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
$(document).ready(function() {
$(".btn-title").click(function() {
$(".caret-icon").toggleClass('fa-caret-up fa-caret-down');
});
$(".freq-btn").change(function() {
var str = "";
$(".freq-btn option:selected").each(function() {
str += $(this).text();
});
$(".btn-text-display").empty();
$(".btn-text-display").text(str);
if ($(this).val() == 'twice daily') {
$('.twice-daily-btn').show();
}
else $('.twice-daily-btn').hide();
if ($(this).val() == 'weekly') {
$('.weekly').show();
}
else $('.weekly').hide();
}).change();
$('.notify-check').change(function(){
$(".caret-icon").toggleClass("hide");
$(".disabled-overlay").toggleClass("hide");
$(".btn-text-display").toggleClass("hide");
if($(".collapse").hasClass("show")) {
$(".collapse").toggleClass("show");
$(".caret-icon").toggleClass('fa-caret-up fa-caret-down');
}
});
$(".disabled-overlay").css({"width": ($("#accordion").width() + "px")});
});
$( window ).resize(function() {
$(".disabled-overlay").css({"width": ($("#accordion").width() + "px")});
});
答案 0 :(得分：2)
您的问题是在事件处理程序中选择一个元素时。而是直接查找类似的元素（以这种方式引用所有元素）：
$(".caret-icon")
您需要遍历dom直到第一个共同祖先，并使用它来找到合适的元素，例如：
$(this).closest('.col-12').find(".caret-icon")
在这种情况下，您可以使用简化格式：
$(this).find(".caret-icon")
请查看.closest()，以了解更多详细信息。
$(".btn-title").click(function() {
$(this).find(".caret-icon").toggleClass('fa-caret-up fa-caret-down');
});
$(".freq-btn").change(function() {
var str = "";
$(this).closest('.col-12').find(".freq-btn option:selected").each(function() {
str += $(this).text();
});
$(this).closest('.col-12').find(".btn-text-display").empty();
$(this).closest('.col-12').find(".btn-text-display").text(str);
if ($(this).val() == 'twice daily') {
$(this).closest('.col-12').find('.twice-daily-btn').show();
}
else $(this).closest('.col-12').find('.twice-daily-btn').hide();
if ($(this).val() == 'weekly') {
$(this).closest('.col-12').find('.weekly').show();
}
else $(this).closest('.col-12').find('.weekly').hide();
}).change();
$('.notify-check').change(function(){
$(this).find(".caret-icon").toggleClass("hide");
$(this).closest('.col-12').find(".disabled-overlay").toggleClass("hide");
$(this).closest('.col-12').find(".btn-text-display").toggleClass("hide");
if($(this).closest('.col-12').find(".collapse").hasClass("show")) {
$(this).closest('.col-12').find(".collapse").toggleClass("show");
$(this).closest('.col-12').find(".caret-icon").toggleClass('fa-caret-up fa-caret-down');
}
});
$(".disabled-overlay").css({"width": ($("#accordion").width() + "px")});
$( window ).resize(function() {
$(".disabled-overlay").css({"width": ($("#accordion").width() + "px")});
});body {
font-family: "roboto", "open-sans";
padding-top: 5%;
}
body .disabled-overlay {
height: 100%;
position: absolute;
z-index: 2;
background-color: rgba(255, 255, 255, 0.7);
}
body .hide {
display: none;
}
body .center {
text-align: center;
padding: 1% 0;
}
body .switch {
position: absolute;
width: 45px;
height: 26px;
top: 10px;
left: 25px;
z-index: 3;
}
body .switch input {
display: none;
}
body .switch input:checked + .slider {
background-color: #32CD32;
}
body .switch input:checked + .slider:before {
-webkit-transform: translateX(18px);
-ms-transform: translateX(18px);
transform: translateX(18px);
}
body .switch input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
body .switch .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
body .switch .slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 3px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
body .switch .round {
border-radius: 34px;
}
body .switch .round:before {
border-radius: 50%;
}
body .card {
font-family: "roboto", "open-sans";
background-color: #daefdb;
z-index: 1;
}
body .card .card-header .btn.btn-title {
color: #000;
font-size: 25px;
font-weight: bold;
width: 100%;
text-decoration: none;
background: none;
}
body .card .card-header .btn.btn-title:hover {
color: #182ed6;
}
body .card .card-header .btn.btn-title:focus {
box-shadow: none;
}
body .card .card-header .btn-text-display {
font-size: 18px;
}
body .card .card-body label {
text-transform: uppercase;
font-weight: bold;
}
body .card .card-body select, body .card .card-body option {
font-size: 18px;
}
body .card .card-body .btn-freq-group {
display: block;
}
body .card .card-body .btn-freq-group button {
background-color: #b8e4ba;
border: 1px solid #3e8e41;
color: #3e8e41;
padding: 10px 24px;
cursor: pointer;
display: block;
width: 100%;
}
body .card .card-body .btn-freq-group button:hover, body .card .card-body .btn-freq-group button:active, body .card .card-body .btn-freq-group button:focus, body .card .card-body .btn-freq-group button.selected {
background-color: #3e8e41;
color: #b8e4ba;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-3">
<label class="switch">
<input type="checkbox" class="notify-check">
<span class="slider round"></span>
</label>
<div class="disabled-overlay"></div>
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<button class="btn btn-title center" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">PRICE <i class="caret-icon fas fa-caret-down hide"></i>
</button>
<div class="btn-text-display center hide">Every 15 Minutes</div>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<div class="btn-freq-group">
<label for="select-list">Frequency</label>
<select class="form-control freq-btn" onfocus='this.size=4;' onblur='this.size=1;' onchange='this.size=1; this.blur();'id="select-list">
<option selected="selected" value="every 15 minutes">Every 15 Minutes</option>
<option value="hourly">Hourly</option>
<option value="twice daily">Twice Daily</option>
<option value="weekly">Weekly</option>
</select>
</div>
<div class="twice-daily-btn hide">
<label for="time-one">Select First Time:</label>
<select onfocus='this.size=4;' onblur='this.size=1;' onchange='this.size=1; this.blur();' class="form-control" id="time-one">
<option selected="selected">12 AM</option>
<option>1 AM</option>
<option>2 AM</option>
<option>3 AM</option>
<option>4 AM</option>
<option>5 AM</option>
<option>6 AM</option>
<option>7 AM</option>
<option>8 AM</option>
<option>9 AM</option>
<option>10 AM</option>
<option>11 AM</option>
<option>12 PM</option>
<option>1 PM</option>
<option>2 PM</option>
<option>3 PM</option>
<option>4 PM</option>
<option>5 PM</option>
<option>6 PM</option>
<option>7 PM</option>
<option>8 PM</option>
<option>9 PM</option>
<option>10 PM</option>
<option>11 PM</option>
</select>
<label for="time-two">Select Second Time:</label>
<select onfocus='this.size=4;' onblur='this.size=1;' onchange='this.size=1; this.blur();' class="form-control" id="time-two">
<option>12 AM</option>
<option>1 AM</option>
<option>2 AM</option>
<option>3 AM</option>
<option>4 AM</option>
<option>5 AM</option>
<option>6 AM</option>
<option>7 AM</option>
<option>8 AM</option>
<option>9 AM</option>
<option>10 AM</option>
<option>11 AM</option>
<option selected="selected">12 PM</option>
<option>1 PM</option>
<option>2 PM</option>
<option>3 PM</option>
<option>4 PM</option>
<option>5 PM</option>
<option>6 PM</option>
<option>7 PM</option>
<option>8 PM</option>
<option>9 PM</option>
<option>10 PM</option>
<option>11 PM</option>
</select>
</div>
<div class="weekly hide">
<label for="day">Select A Day:</label>
<select onfocus='this.size=4;' onblur='this.size=1;' onchange='this.size=1; this.blur();' class="form-control" id="day">
<option selected="selected">Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
<option>Sunday</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-3">
<label class="switch">
<input type="checkbox" class="notify-check">
<span class="slider round"></span>
</label>
<div class="disabled-overlay"></div>
<div id="accordion2">
<div class="card">
<div class="card-header" id="headingTwo">
<button class="btn btn-title center" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">PRICE <i class="caret-icon fas fa-caret-down hide"></i>
</button>
<div class="btn-text-display center hide">Every 15 Minutes</div>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion2">
<div class="card-body">
<div class="btn-freq-group">
<label for="select-list">Frequency</label>
<select class="form-control freq-btn" onfocus='this.size=4;' onblur='this.size=1;' onchange='this.size=1; this.blur();'id="select-list">
<option selected="selected" value="every 15 minutes">Every 15 Minutes</option>
<option value="hourly">Hourly</option>
<option value="twice daily">Twice Daily</option>
<option value="weekly">Weekly</option>
</select>
</div>
<div class="twice-daily-btn hide">
<label for="time-one">Select First Time:</label>
<select onfocus='this.size=4;' onblur='this.size=1;' onchange='this.size=1; this.blur();' class="form-control" id="time-one">
<option selected="selected">12 AM</option>
<option>1 AM</option>
<option>2 AM</option>
<option>3 AM</option>
<option>4 AM</option>
<option>5 AM</option>
<option>6 AM</option>
<option>7 AM</option>
<option>8 AM</option>
<option>9 AM</option>
<option>10 AM</option>
<option>11 AM</option>
<option>12 PM</option>
<option>1 PM</option>
<option>2 PM</option>
<option>3 PM</option>
<option>4 PM</option>
<option>5 PM</option>
<option>6 PM</option>
<option>7 PM</option>
<option>8 PM</option>
<option>9 PM</option>
<option>10 PM</option>
<option>11 PM</option>
</select>
<label for="time-two">Select Second Time:</label>
<select onfocus='this.size=4;' onblur='this.size=1;' onchange='this.size=1; this.blur();' class="form-control" id="time-two">
<option>12 AM</option>
<option>1 AM</option>
<option>2 AM</option>
<option>3 AM</option>
<option>4 AM</option>
<option>5 AM</option>
<option>6 AM</option>
<option>7 AM</option>
<option>8 AM</option>
<option>9 AM</option>
<option>10 AM</option>
<option>11 AM</option>
<option selected="selected">12 PM</option>
<option>1 PM</option>
<option>2 PM</option>
<option>3 PM</option>
<option>4 PM</option>
<option>5 PM</option>
<option>6 PM</option>
<option>7 PM</option>
<option>8 PM</option>
<option>9 PM</option>
<option>10 PM</option>
<option>11 PM</option>
</select>
</div>
<div class="weekly hide">
<label for="day">Select A Day:</label>
<select onfocus='this.size=4;' onblur='this.size=1;' onchange='this.size=1; this.blur();' class="form-control" id="day">
<option selected="selected">Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
<option>Thursday</option>
<option>Friday</option>
<option>Saturday</option>
<option>Sunday</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>