文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何更改开发人员的职位？

问如何更改开发人员的职位？
EN

Stack Overflow用户
提问于 2021-09-20 03:50:25
回答 4查看 79关注 0票数 0

在我的浏览器Firefox和Chrome中，我不会收到任何错误或警告。只是练习而已。我正在学习javascript和动态HTML课程。如果有人想看看我的代码，告诉我我做错了什么，我会很感激的。一定有些事情我搞错了。

我想在页面加载时创建新的div。这些div将显示为一个有序的组，根据来自JSON文件的外部数据进行更改。我需要用一个for循环来实现这一点，因为需要超过100个div。

​

​

HTML：

代码语言：javascript
复制
<!doctype html>
<html lang="fa" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
    <div id="showFilters">
        <!-- GROUP -->
    </div>
    <div class="w-100 text-center mt-4">
        <p>Add new group</p>
        <a id="addFilter" class="bg-primary text-white pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">
            <i class="fas fa-plus"></i>
        </a>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    let count = 0;
    $('#addFilter').click(function () {
        count++;
        let html = '<div class="position-relative">'+
            '<div class="row">'+
            '<div class="col-md-4 mb-3">'+
            '<label for="name">Name</label>'+
            '<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
            '</div>'+
            '<div class="col-md-4 mb-3">'+
            '<label for="latin">Latin</label>'+
            '<input type="text" id="latin" class="form-control" name="filters['+count+'][latin]">'+
            '</div>'+
            '<div class="col-md-4 mb-3">'+
            '<label for="field">Select a field</label>'+
            '<select id="field" class="form-select" name="filters['+count+'][field]">'+
            '<option value="1">CheckBox</option>'+
            '<option value="2">Color</option>'+
            '</select>'+
            '</div>'+
            '</div>'+
            '<div id="showGroups"> '+
            '</div>'+
            '<div class="w-100 text-center">'+
            '<p>Add new subgroup.</p>'+
            '<a onclick="addChildFilter()" class="bg-danger text-info pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">'+
            '<i class="fas fa-plus"></i>'+
            '</a>'+
            '</div>'+
            '</div>';
        $('#showFilters').append(html);
    });
    function addChildFilter() {
        count++;
        let selectedField = $('#field').val();
        if (selectedField == 1) {
            let html = '<div class="w-100">'+
                '<div class="col-md-4 mb-3 position-relative">'+
                '<label for="name">Check Box Name</label>'+
                '<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
                '</div>'+
                '</div>';
            $('#showGroups').append(html);
        }
        if (selectedField == 2) {
            let html = '<div class="position-relative">'+
                '<div class="row">'+
                '<div class="col-md-6 mb-3">'+
                '<label for="name">Color Name</label>'+
                '<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
                '</div>'+
                '<div class="col-md-6 mb-3">'+
                '<label for="code">Code Color</label>'+
                '<input type="text" id="code" class="form-control jscolor" name="filters['+count+'][code]">'+
                '</div>'+
                '</div>'+
                '</div>';
            $('#showGroups').append(html);
        }
    }
</script>
</body>
</html>
javascript
jquery
bootstrap-5
EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2021-09-20 04:10:46

修正了以上演示中的所有问题。单击Run code snippet查看。

问题是，您没有使用动态元素id来呈现。

例如，在function addChildFilter()中，仍然使用第一个组$('#field').val()的id。你也应该动动它。

因此，我为每个组添加一个id：id="group' + count + '"。然后，我可以方便地通过let selectedField = $('#group' + groupId).find('.field').first().val();查询任意组中的字段值。

我们还必须通过$('#group' + groupId).find('.showGroups').append(html);将新的HTML划分为正确的组。

在所有情况下，我们都动态添加/删除HTML。您应该使用类，或者使用带有特定数字的元素Id来表示eachs。

​

代码语言：javascript
复制
<!doctype html>
<html lang="fa" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <title>Hello, world!</title>
</head>
<body>
<div class="container mt-5">
    <div id="showFilters">
        <!-- GROUP -->
    </div>
    <div class="w-100 text-center mt-4">
        <p>Add new group</p>
        <a id="addFilter" class="bg-primary text-white pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">
            <i class="fas fa-plus"></i>
        </a>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    let count = 0;
    $('#addFilter').click(function () {
        count++;
        let html = '<div id="group' + count + '" class="position-relative">'+
            '<div class="row">'+
            '<div class="col-md-4 mb-3">'+
            '<label for="name">Name</label>'+
            '<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
            '</div>'+
            '<div class="col-md-4 mb-3">'+
            '<label for="latin">Latin</label>'+
            '<input type="text" id="latin" class="form-control" name="filters['+count+'][latin]">'+
            '</div>'+
            '<div class="col-md-4 mb-3">'+
            '<label for="field">Select a field</label>'+
            '<select class="form-select field" name="filters['+count+'][field]">'+
            '<option value="1">CheckBox</option>'+
            '<option value="2">Color</option>'+
            '</select>'+
            '</div>'+
            '</div>'+
            '<div id="showGroups" class="showGroups"> '+
            '</div>'+
            '<div class="w-100 text-center">'+
            '<p>Add new subgroup.</p>'+
            '<a onclick="addChildFilter('+count+')" class="bg-danger text-info pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">'+
            '<i class="fas fa-plus"></i>'+
            '</a>'+
            '</div>'+
            '</div>';
        $('#showFilters').append(html);
    });
    function addChildFilter(groupId) {
        let selectedField = $('#group' + groupId).find('.field').first().val();
        console.log(selectedField);
        if (selectedField == 1) {
            let html = '<div class="w-100">'+
                '<div class="col-md-4 mb-3 position-relative">'+
                '<label for="name">Check Box Name</label>'+
                '<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
                '</div>'+
                '</div>';
            $('#group' + groupId).find('.showGroups').append(html);
        }
        if (selectedField == 2) {
            let html = '<div class="position-relative">'+
                '<div class="row">'+
                '<div class="col-md-6 mb-3">'+
                '<label for="name">Color Name</label>'+
                '<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
                '</div>'+
                '<div class="col-md-6 mb-3">'+
                '<label for="code">Code Color</label>'+
                '<input type="text" id="code" class="form-control jscolor" name="filters['+count+'][code]">'+
                '</div>'+
                '</div>'+
                '</div>';
            $('#group' + groupId).find('.showGroups').append(html);
        }
    }
</script>
</body>
</html>

​

票数 1
EN

Stack Overflow用户

发布于 2021-09-20 04:09:18

将

代码语言：javascript
复制
function addChildFilter(e) {
    count++;
    let element = $(e).parents('.position-relative').find('#showGroups');
    let selectedField = $('#field').val();
    if (selectedField == 1) {
        let html = '<div class="w-100">'+
            '<div class="col-md-4 mb-3 position-relative">'+
            '<label for="name">Check Box Name</label>'+
            '<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
            '</div>'+
            '</div>';
        element.append(html);
    }
    if (selectedField == 2) {
        let html = '<div class="position-relative">'+
            '<div class="row">'+
            '<div class="col-md-6 mb-3">'+
            '<label for="name">Color Name</label>'+
            '<input type="text" id="name" class="form-control" name="filters['+count+'][name]">'+
            '</div>'+
            '<div class="col-md-6 mb-3">'+
            '<label for="code">Code Color</label>'+
            '<input type="text" id="code" class="form-control jscolor" name="filters['+count+'][code]">'+
            '</div>'+
            '</div>'+
            '</div>';
        element.append(html);
    }
}
票数 0
EN

Stack Overflow用户

发布于 2021-09-20 04:09:39

代码的问题是，您要使用相同的id元素添加相同的代码，所以当您选择一个带有$('#showGroups')的元素时，它将从上到下在html上找到第一个。

因此，我所做的是添加一个名为group的新变量，它将保持组号的计数，并沿着id分配它，并将其发送到addChildFilter方法中。

您可以在这里检查解决方案：(还请注意，其他id的问题与$('#field') id的问题相同。

​

代码语言：javascript
复制
<!doctype html>
<html lang="fa" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <title>Hello, world!</title>
</head>

<body>
  <div class="container mt-5">
    <div id="showFilters">
      <!-- GROUP -->
    </div>
    <div class="w-100 text-center mt-4">
      <p>Add new group</p>
      <a id="addFilter" class="bg-primary text-white pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">
        <i class="fas fa-plus"></i>
      </a>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    let count = 0;
    let group = 0;
    $('#addFilter').click(function() {
      count++;
      group++;
      let html = '<div class="position-relative">' +
        '<div class="row">' +
        '<div class="col-md-4 mb-3">' +
        '<label for="name">Name</label>' +
        '<input type="text" id="name" class="form-control" name="filters[' + count + '][name]">' +
        '</div>' +
        '<div class="col-md-4 mb-3">' +
        '<label for="latin">Latin</label>' +
        '<input type="text" id="latin" class="form-control" name="filters[' + count + '][latin]">' +
        '</div>' +
        '<div class="col-md-4 mb-3">' +
        '<label for="field">Select a field</label>' +
        '<select id="field" class="form-select" name="filters[' + count + '][field]">' +
        '<option value="1">CheckBox</option>' +
        '<option value="2">Color</option>' +
        '</select>' +
        '</div>' +
        '</div>' +
        '<div id="showGroups' + group + '"> ' +
        '</div>' +
        '<div class="w-100 text-center">' +
        '<p>Add new subgroup.</p>' +
        '<a onclick="addChildFilter(' + group + ')" class="bg-danger text-info pt-2 pb-2 pe-3 ps-3 rounded-circle cursor-pointer">' +
        '<i class="fas fa-plus"></i>' +
        '</a>' +
        '</div>' +
        '</div>';
      $('#showFilters').append(html);
    });

    function addChildFilter(group) {
      count++;
      let selectedField = $('#field').val();
      if (selectedField == 1) {
        let html = '<div class="w-100">' +
          '<div class="col-md-4 mb-3 position-relative">' +
          '<label for="name">Check Box Name</label>' +
          '<input type="text" id="name" class="form-control" name="filters[' + count + '][name]">' +
          '</div>' +
          '</div>';
        $('#showGroups' + group).append(html);
      }
      if (selectedField == 2) {
        let html = '<div class="position-relative">' +
          '<div class="row">' +
          '<div class="col-md-6 mb-3">' +
          '<label for="name">Color Name</label>' +
          '<input type="text" id="name" class="form-control" name="filters[' + count + '][name]">' +
          '</div>' +
          '<div class="col-md-6 mb-3">' +
          '<label for="code">Code Color</label>' +
          '<input type="text" id="code" class="form-control jscolor" name="filters[' + count + '][code]">' +
          '</div>' +
          '</div>' +
          '</div>';
        $('#showGroups').append(html);
      }
    }
  </script>
</body>

</html>

​

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

https://stackoverflow.com/questions/69248898

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

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

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

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

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