具有给定HTML类ID参数的动态slideToggle函数

时间:2019-02-06 15:16:23

标签: javascript jquery html slidetoggle

我对创建动态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函数仅适用于concreate html类。如果我将另一个类附加到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>

1 个答案:

答案 0 :(得分:1)

当我是一名大学生时,一位老师告诉我们重复的代码称为“函数”:

$(document).ready(function () {
    myStuff("client");
});

然后您将ID随时传递给myStuff,例如:

caffe <...>