时间戳

首页 > 解决方案 > 具有给定 html 类 id 参数的动态 slideToggle 函数

javascript - 具有给定 html 类 id 参数的动态 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 函数只用于创建 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>

标签： javascriptjqueryhtmlslidetoggle

解决方案

当我还是个大学生的时候，一位老师告诉我们，重复的代码叫做“函数”：

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");
});

推荐阅读