具有给定 html class id 参数的动态 slideToggle 函数
Dynamic slideToggle function with given html class id parameters
我对创建动态 jquery slideToggle 函数有疑问。我有 html 模板如下:
<h4 id="client" class="section-title">
<div class="sect-icon"></div>
<span>Client Info</span> </h4>
<div class="form-row" id="client_data">
<div class="form-group col-md-4">
<label for="id_client_name">Name</label>
<input class="form-control" disabled value="{{client.client_name}}">
</div>
</div>
和jQuery的功能为:
$(document).ready(function () {
$("#client").click(function () {
if ($('#client_data').is(':visible')) {
$("#client").removeClass("section-title");
$("#client").addClass("section-title closed");
} else {
$("#client").removeClass("section-title closed");
$("#client").addClass("section-title");
}
$("#client_data").slideToggle("fast");
});
这是工作。但是这个jQuery函数只对concreatehtmlclass有效。如果我将另一个 class 附加到 html ,那么我应该复制这个 jQuery 和过去并编辑 id 部分。但我想为动态 html id 编写一个 jQuery 函数。
我的意思是我如何在不创建新的 jQuery
的情况下将 jQuery 函数用于 html 以下
<h4 id="equip" class="section-title">
<div class="sect-icon"></div> <span>Calibrated Equipment</span></h4>
<div class="form-row" id="equip_data">
<div class="form-group col-md-4">
<label for="id_brand_name">Brand</label>
<input class="form-control" disabled value="{{equip.brand_name}}">
</div>
</div>
上大学的时候老师告诉我们重复的代码叫"function":
function myStuff(idText) {
$("#" + idText).click(function () {
if ($('#' + idText + "_data").is(':visible')) {
$("#" + idText).removeClass("section-title").addClass("section-title closed");
} else {
$("#" + idText).removeClass("section-title closed").addClass("section-title");
}
$("#" + idText).slideToggle("fast");
}
你可以随时将 id 传递给 myStuff,例如:
$(document).ready(function () {
myStuff("client");
});
我对创建动态 jquery slideToggle 函数有疑问。我有 html 模板如下:
<h4 id="client" class="section-title">
<div class="sect-icon"></div>
<span>Client Info</span> </h4>
<div class="form-row" id="client_data">
<div class="form-group col-md-4">
<label for="id_client_name">Name</label>
<input class="form-control" disabled value="{{client.client_name}}">
</div>
</div>
和jQuery的功能为:
$(document).ready(function () {
$("#client").click(function () {
if ($('#client_data').is(':visible')) {
$("#client").removeClass("section-title");
$("#client").addClass("section-title closed");
} else {
$("#client").removeClass("section-title closed");
$("#client").addClass("section-title");
}
$("#client_data").slideToggle("fast");
});
这是工作。但是这个jQuery函数只对concreatehtmlclass有效。如果我将另一个 class 附加到 html ,那么我应该复制这个 jQuery 和过去并编辑 id 部分。但我想为动态 html id 编写一个 jQuery 函数。 我的意思是我如何在不创建新的 jQuery
的情况下将 jQuery 函数用于 html 以下 <h4 id="equip" class="section-title">
<div class="sect-icon"></div> <span>Calibrated Equipment</span></h4>
<div class="form-row" id="equip_data">
<div class="form-group col-md-4">
<label for="id_brand_name">Brand</label>
<input class="form-control" disabled value="{{equip.brand_name}}">
</div>
</div>
上大学的时候老师告诉我们重复的代码叫"function":
function myStuff(idText) {
$("#" + idText).click(function () {
if ($('#' + idText + "_data").is(':visible')) {
$("#" + idText).removeClass("section-title").addClass("section-title closed");
} else {
$("#" + idText).removeClass("section-title closed").addClass("section-title");
}
$("#" + idText).slideToggle("fast");
}
你可以随时将 id 传递给 myStuff,例如:
$(document).ready(function () {
myStuff("client");
});