文章/答案/技术大牛

发布

社区首页 >问答首页 >如何改变元素的位置？

问如何改变元素的位置？
EN

Stack Overflow用户

提问于 2021-09-19 16:16:37

回答 1查看 396关注 0票数 1

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

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

HTML：

<!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>

html

jquery

bootstrap-5

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-09-20 08:30:10

您可以将this放在onclick事件中，以便将其添加到该元素中，如下所示：

<a onclick="addChildFilter(this)"

然后

function addChildFilter(reed){}

然后

reed.parentElement.append(html);

这样，它将添加到add subgroup btn存在的位置。现在的问题是，html代码是直接打印的，而不是您所知道的字段，您可能会发现这个问题，因为我在jQuery方面不太在行(所以使用了一些JavaScript)。看看你能不能从这个答案中找到帮助。

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(this)" 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(reed) {
        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>';
            reed.parentElement.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>';
            reed.parentElement.append(html);
        }
    }

<!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>

</body>

</html>

票数 -1

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

原文链接：

https://stackoverflow.com/questions/69245004

复制

相似问题

问如何改变元素的位置？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何改变元素的位置？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何改变元素的位置？
EN