【发布时间】：2019-01-26 15:57:46
【问题描述】：
我有两个 Bootstrap 手风琴。每个手风琴都通过 JQuery 在其中发生了多种事情。但是当我点击一个手风琴时，两者都在同时应用我编写的 JQuery，我希望它们一次发生一个。我提供了一个codepen。
我想对两个面板使用相同的 JQuery，这样我就不必在 JQuery 中编写两次相同的代码。
这是我的代码笔。
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")});
});
【问题讨论】：
-
您正在按类访问元素，并且两个实例共享一个类名。所以它正在做你告诉它做的事情。要么给第二个实例不同的类名，要么通过其他选择器访问。
-
@peeebeee 但是有没有办法使用 JQuery 循环遍历每个带有类名的手风琴？喜欢面向对象的脚本？
-
有很多方法可以做你想做的事。 @peeebeee 是对的，它会按照您的要求执行。如果您不想再次编写代码，我建议使用函数。
-
@toffler 我应该把我所有的 JQuery 放在一个函数中吗？
标签： jquery html each accordion