如何改變元素的位置？ -有解無憂

在我的瀏覽器Firefox和Chrome中，我沒有得到任何錯誤或警告。這只是練習而已。我正在學習javascript和動態HTML課程。如果有人愿意看看我的代碼并告訴我我做錯了什么，我會很感激。我肯定有什么地方做得不對。

我想在頁面加載時創建新的 divs。這些 divs 將作為一個有序的組出現，其變化取決于來自 JSON 檔案的外部資料。我需要用for a loop來完成這個任務，因為需要超過100個div。

HTML:

<! doctype html>
< html lang="fa" dir="ltr">
<head>/span>
    <meta charset="utf-8">/span>
    < 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">/span>
    <link rel=" stylesheet" href="https://cdnjs. cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">/span>
    <title>Hello, world! </title>
</head> 
<body> 
<div class="container mt-5"> 
    <div id="showFilters"/span>>
        <!-- GROUP -->
    </div> 
    <div class="w-100 text-center mt-4">
        <p>添加新組</p>/span>
        < 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"/span>> </i>>
        </a>/span>
    </div>/span>
</div>/span>
<script src="https://cdnjs.cloudflare. com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>/span>
<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>/span>
<script>
    讓count = 0。
    $('#addFilter').click(function () {
        count  ;
        讓html = '<div class="position-relative"> ' 
            '<div class=" row">' 
            '<div class="col-md-4 mb-3"/span>>/span>' 
            '<label for="name"/span>> Name</label>/span>' 
            '< input type="text"/span> id="name" class="form-control" name=" filters[' count '] [name]"> ' 
            '</div>' 
            '<div class="col-md-4 mb-3"/span>>/span>' 
            '<label for="latin"/span>> Latin</label>/span>' 
            '< input type="text" id="latin" class="form-control" name=" filters[' count '] [latin]"> ' 
            '</div>/span>' 
            '<div class="col-md-4 mb-3"/span>>/span>' 
            '<label for="field"> 選擇一個欄位</label> ' 
            '< select id="field" class="form-select" name=" filters[' count '] [field]"> ' 
            '<option value="1"/span>> CheckBox</option>/span>' 
            '<option value="2"/span>> 顏色</選項>/span>' 
            '</select>/span>' 
            '</div>/span>' 
            '</div>/span>' 
            '<div id="showGroups"> '  '</ div> ' 
            '</div>'  '>' 
            '<div class="w-100 text-center">'  '<div>' 
            '<p>添加新的子組。</p>/span>' 
            '< 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"/span>> </i>/span>' 
            '</a>/span>' 
            '</div>/span>' 
            '</div>' 。
        $('#showFilters').append(html)。
    });
    函式 addChildFilter() {
        count  ;
        讓 selectedField = $('#field').val()。
        如果（selectedField == 1） {
            let html = '<div class="w-100"/span>>' 
                '<div class="col-md-4 mb-3 position-relative"/span>>' 
                '<label for="name"/span>> Check Box Name</label>' 
                '< input type="text"/span> id="name" class="form-control" name=" filters[' count '] [name]"> ' 
                '</div>' 
                '</div>' 。
            $('#showGroups').append(html)。
        }
        如果(selectedField == 2) {
            讓html = '<div class="position-relative"/span>>' 
                '<div class=" row">' 
                '<div class="col-md-6 mb-3"/span>>/span>' 
                '<label for="name"/span>> 顏色名稱</label>/span>' 
                '< input type="text"/span> id="name" class="form-control" name=" filters[' count '] [name]"> ' 
                '</div>' 
                '<div class="col-md-6 mb-3"/span>>' 
                '<label for="code"/span>> 代碼顏色</label>/span>' 
                '< input type="text"/span> id="code" class="form-control jscolor" name=" filters[' count '] [code]"> ' 
                '</div>' 
                '</div>/span>' 
                '</div>' 。
            $('#showGroups').append(html)。
        }
    
</script> 
</body> 
</html>

uj5u.com熱心網友回復：

你可以把this放在onclick事件中，這樣它將只被添加到該元素中，就像這樣：

<a onclick="addChildFilter(this)"
然后
function addChildFilter(reed){}
然后
reed.parentElement.append(html);

這樣它就被添加到了add subgroup btn所在的地方。現在的問題是，html代碼被直接列印出來，而不是欄位，因為你知道jQuery，你可能會發現這個問題，因為我不擅長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]">'/span> 
            '</div>' 
            '<div class="col-md-4 mb-3">' 
            '<label for="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]">'/span> 
                '</div> ' 
                '</div>'。
            reed.parentElement.append（html）。
        }
        if (selectedField == 2) {
            let html = '<div class="position-relative">'/span> 
                '<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]">'/span> 
                '</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>/span>
  <meta charset="utf-8">/span>
  < 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">/span>
  <link rel=" stylesheet" href="https://cdnjs. cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">/span>
  <title>Hello, world! </title>
</head> 

<body> 
  <div class="container mt-5"> 
    <div id="showFilters"/span>>
      <!-- GROUP -->
    </div> 
    <div class="w-100 text-center mt-4">
      <p>添加新組</p>/span>
      < 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"/span>> </i>>
      </a>/span>
    </div>/span>
  </div>/span>
  <script src="https://cdnjs.cloudflare. com/ajax/libs/bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>/span>
  <script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>/span>

</body> 

</html>/span>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/321673.html

標籤：

上一篇：如何在postgresql中將jsonb嵌套字串欄位轉換為int？

下一篇：如何對MySQL中多個日期的前n天進行求和