文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >追加div时动态更改类名

问追加div时动态更改类名
EN

Stack Overflow用户
提问于 2022-09-23 18:09:54
回答 1查看 31关注 0票数 -1

一排就行了。但是，当我追加额外的行时，它会显示所有隐藏的div，以及当我将路由更改为值时，所有目标div都会发生变化。但我需要相应地修改每一行。这是我的代码示例。

​

代码语言：javascript
复制
//add div by onclick event from button
function add() {
  var div = document.createElement("div");

  div.innerHTML = `
          <div class="row">
            <div class="col-md-3">
              <div class="form-group">
                <label>DTMF</label>
                <select class="form-control" name="" id="">
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                </select>
              </div>
            </div>
    
            <div class="col-md-4 route">
              <div class="form-group">
                <label>Route to</label>
                <select class="form-control" onchange="change(this)" name="" id="">
                  <option value="">Select</option>
                  <option value="department">department</option>
                  <option value="employee">employee</option>
                  <option value="area">area</option>
                </select>
              </div>
            </div>
    
            <div class="col-md-4 department">
              <div class="form-group">
                <label>Destination</label>
                <select class="form-control" name="" id="">
                  <option value="1">dep-1</option>
                  <option value="2">dep-2</option>
                  <option value="3">dep-3</option>
                  <option value="4">dep-4</option>
                </select>
              </div>
            </div>
    
            <div class="col-md-4 employee">
              <div class="form-group">
                <label>Employee</label>
                <select class="form-control" name="" id="">
                  <option value="1">emp-1</option>
                  <option value="2">emp-2</option>
                  <option value="3">emp-3</option>
                  <option value="4">emp-4</option>
                </select>
              </div>
            </div>
    
            <div class="col-md-4 area">
              <div class="form-group">
                <label>Area</label>
                <select class="form-control" name="" id="">
                  <option value="1">area-1</option>
                  <option value="2">area-2</option>
                  <option value="3">area-3</option>
                  <option value="4">area-4</option>
                </select>
              </div>
              </div>
            </div>`;
  document.getElementById("appenhere").appendChild(div);
}
//hide div by css class
$(document).ready(function() {
  $(".department").hide();
  $(".employee").hide();
  $(".area").hide();
});
//show div by onchange event
function change(select) {
  //   console.log(select.value);
  var parent = $(select).siblings().siblings();
  console.log(parent);
  if (select.value == "department") {
    $(".department").show();
    $(".employee").hide();
    $(".area").hide();
  } else if (select.value == "employee") {
    $(".department").hide();
    $(".employee").show();
    $(".area").hide();
  } else if (select.value == "area") {
    $(".department").hide();
    $(".employee").hide();
    $(".area").show();
  }
}
代码语言：javascript
复制
<head>
  <title>test page</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container pt-4">
    <div class="row">
      <div class="col-md-3">
        <div class="form-group">
          <label>DTMF</label>
          <select class="form-control" name="" id="">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
        </div>
      </div>

      <div class="col-md-4 route">
        <div class="form-group">
          <label>Route to</label>
          <select class="form-control" onchange="change(this)" name="" id="">
            <option value="">Select</option>
            <option value="department">department</option>
            <option value="employee">employee</option>
            <option value="area">area</option>
          </select>
        </div>
      </div>

      <div class="col-md-4 department">
        <div class="form-group">
          <label>Destination</label>
          <select class="form-control" name="" id="">
            <option value="1">dep-1</option>
            <option value="2">dep-2</option>
            <option value="3">dep-3</option>
            <option value="4">dep-4</option>
          </select>
        </div>
      </div>

      <div class="col-md-4 employee">
        <div class="form-group">
          <label>Employee</label>
          <select class="form-control" name="" id="">
            <option value="1">emp-1</option>
            <option value="2">emp-2</option>
            <option value="3">emp-3</option>
            <option value="4">emp-4</option>
          </select>
        </div>
      </div>

      <div class="col-md-4 area">
        <div class="form-group">
          <label>Area</label>
          <select class="form-control" name="" id="">
            <option value="1">area-1</option>
            <option value="2">area-2</option>
            <option value="3">area-3</option>
            <option value="4">area-4</option>
          </select>
        </div>
      </div>
    </div>
    <div id="appenhere"></div>
    <button onclick="add()">Add more</button>
  </div>
</body>

​

javascript
jquery
EN

回答 1

Stack Overflow用户

发布于 2022-09-23 18:19:56

使用$(select).closest(".row")获取包含的行。然后，您可以只更改同一行中的元素。

首先使用CSS隐藏依赖菜单，而不是在.hide()中调用$(document).ready()，因此它将应用于动态添加的元素。

​

代码语言：javascript
复制
//add div by onclick event from button
function add() {
  var div = document.createElement("div");

  div.innerHTML = `
          <div class="row">
            <div class="col-md-3">
              <div class="form-group">
                <label>DTMF</label>
                <select class="form-control" name="" id="">
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                </select>
              </div>
            </div>
    
            <div class="col-md-4 route">
              <div class="form-group">
                <label>Route to</label>
                <select class="form-control" onchange="change(this)" name="" id="">
                  <option value="">Select</option>
                  <option value="department">department</option>
                  <option value="employee">employee</option>
                  <option value="area">area</option>
                </select>
              </div>
            </div>
    
            <div class="col-md-4 department">
              <div class="form-group">
                <label>Destination</label>
                <select class="form-control" name="" id="">
                  <option value="1">dep-1</option>
                  <option value="2">dep-2</option>
                  <option value="3">dep-3</option>
                  <option value="4">dep-4</option>
                </select>
              </div>
            </div>
    
            <div class="col-md-4 employee">
              <div class="form-group">
                <label>Employee</label>
                <select class="form-control" name="" id="">
                  <option value="1">emp-1</option>
                  <option value="2">emp-2</option>
                  <option value="3">emp-3</option>
                  <option value="4">emp-4</option>
                </select>
              </div>
            </div>
    
            <div class="col-md-4 area">
              <div class="form-group">
                <label>Area</label>
                <select class="form-control" name="" id="">
                  <option value="1">area-1</option>
                  <option value="2">area-2</option>
                  <option value="3">area-3</option>
                  <option value="4">area-4</option>
                </select>
              </div>
              </div>
            </div>`;
  document.getElementById("appenhere").appendChild(div);
}
//show div by onchange event
function change(select) {
  //   console.log(select.value);
  var parent = $(select).closest(".row");
  console.log(parent);
  if (select.value == "department") {
    parent.find(".department").show();
    parent.find(".employee").hide();
    parent.find(".area").hide();
  } else if (select.value == "employee") {
    parent.find(".department").hide();
    parent.find(".employee").show();
    parent.find(".area").hide();
  } else if (select.value == "area") {
    parent.find(".department").hide();
    parent.find(".employee").hide();
    parent.find(".area").show();
  }
}
代码语言：javascript
复制
.department,
.employee,
.area {
  display: none;
}
代码语言：javascript
复制
<head>
  <title>test page</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container pt-4">
    <div class="row">
      <div class="col-md-3">
        <div class="form-group">
          <label>DTMF</label>
          <select class="form-control" name="" id="">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
        </div>
      </div>

      <div class="col-md-4 route">
        <div class="form-group">
          <label>Route to</label>
          <select class="form-control" onchange="change(this)" name="" id="">
            <option value="">Select</option>
            <option value="department">department</option>
            <option value="employee">employee</option>
            <option value="area">area</option>
          </select>
        </div>
      </div>

      <div class="col-md-4 department">
        <div class="form-group">
          <label>Destination</label>
          <select class="form-control" name="" id="">
            <option value="1">dep-1</option>
            <option value="2">dep-2</option>
            <option value="3">dep-3</option>
            <option value="4">dep-4</option>
          </select>
        </div>
      </div>

      <div class="col-md-4 employee">
        <div class="form-group">
          <label>Employee</label>
          <select class="form-control" name="" id="">
            <option value="1">emp-1</option>
            <option value="2">emp-2</option>
            <option value="3">emp-3</option>
            <option value="4">emp-4</option>
          </select>
        </div>
      </div>

      <div class="col-md-4 area">
        <div class="form-group">
          <label>Area</label>
          <select class="form-control" name="" id="">
            <option value="1">area-1</option>
            <option value="2">area-2</option>
            <option value="3">area-3</option>
            <option value="4">area-4</option>
          </select>
        </div>
      </div>
    </div>
    <div id="appenhere"></div>
    <button onclick="add()">Add more</button>
  </div>
</body>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/73831497

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档