如何改變設計位置？ -有解無憂

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

我想在頁面加載時創建新的 divs。這些 divs 將作為一個有序的組出現，其變化取決于來自 JSON 檔案的外部資料。我需要用for a loop來完成這個任務，因為需要超過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="styleheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.1/css/bootstrap.min.css">
    <link rel="styleheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <title>你好，世界！</title>。
</head>
<body>
<div class="container mt-5">
    <div id="showFilters">
        <! -- GROUP -- >
    </div>
    <div class="w-100 text-center mt-4">
        <p>添加新組</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>
    讓count = 0。
    $('#addFilter').click(function () {
        count  ;
        讓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">選擇一個欄位</label>'  '<select id="field">' 
            
            '<option value="1">CheckBox</option>' 
            '<option value="2">Color</option>' 
            '</select>' 
            '</div>' 
            '</div>' 
            '<div id="showGroups">'  '</div>'  '</div>' 
            '</div>' 
            '<div class="w-100 text-center" >' 
            '<p>添加新的子組。</p>'  '<a onclick="showGroups">  '</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)。
    });
    函式 addChildFilter() {
        count  ;
        讓 selectedField = $('#field').val()。
        如果(selectedField == 1) {
            讓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)。
        }
        如果(selectedField == 2) {
            讓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>

uj5u.com熱心網友回復：

將<a onclick="addChildFilter()" 改為onclick="addChildFilter(this)" 并將你的函式addChildFilter()改為：

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]">'/span> 
            '</div> ' 
            '</div>'。
        element.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>'。
        element.append（html）。
    }

uj5u.com熱心網友回復：

你的代碼的問題是，你用相同的id的元素添加相同的代碼，所以當你用$('#showGroups')選擇一個時，它會在html上從上到下找第一個。

所以我所做的是添加一個新的變數，名為group，它將保持組的數量，并將其與id一起分配給你的addChildFilter方法。

你可以在這里查看這個解決方案。(也請注意，你在使用其他id的時候也會遇到同樣的問題，比如你的$('#field')。

。

<!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;
    let group = 0;
    $('#addFilter').click(function() {
      count  ;
      group  ;
      讓html = '<div class="position-relative"/span>>'  
        '<div class="row">'   'class="row">'
        '<div class="col-md-4 mb-3">'   'class="row">'
        '<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">'   '<div>'
        '<label for="latin"/span>> Latin</label>/span>'  
        '< input type="text" id="latin" class="form-control" name=" filters['   count   '] [latin]"> '  
        '</div>'   '</'
        '<div class="col-md-4 mb-3">'   '<div>'
        '<label for="field"> 選擇一個欄位</label>/span>'  
        '< select id="field" class="form-select" name=" filters['   count   '] [field]"> '  
        '<option value="1"/span>> CheckBox</option>/span>'  
        '<option value="2"/span>> Color</option>'  
        '</select>'   '</select>'
        '</div>'   '</div>'
        '</div>'   '</div>'
        '<div id="showGroups'   group   '"> ' 
        '</div>'   '>'
        
        '<p>添加新的子組。</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"/span>> </i>/span>'  
        '</a>'   '</a>'
        '</div>'   '</>'
        '</div>' 。
      $('#showFilters').append(html)。
    });

    函式 addChildFilter(group) {
      count  ;
      讓 selectedField = $('#field').val()。
      如果（selectedField == 1） {
        let html = '<div class="w-100"/span>>'  
          '<div class="col-md-4 mb-3 position-relative">'   '
          '<label for="name"/span>> Check Box Name</label>'  
          '< input type="text"/span> id="name" class="form-control" name=" filters['   count   ' ][name]"> '  
          '</div>'   '</'
          '</div>' 。
        $('#showGroups'   group).append(html)。
      }
      如果(selectedField == 2) {
        讓html = '<div class="position-relative">/span>'  
          '<div class="row">'   'class="row">'
          '<div class="col-md-6 mb-3">'   'class="row">'
          '<label for="name"/span>> 顏色名稱</label>'  
          '< input type="text"/span> id="name" class="form-control" name=" filters['   count   ' ][name]"> '  
          '</div>'   '</'
          '<div class="col-md-6 mb-3">'   '<div>'
          '<label for="code"/span>> 代碼顏色</label>'  
          '< input type="text"/span> id="code" class="form-control jscolor" name=" filters['   count   '] [code]"> '  
          '</div>'   '</'
          '</div>'   '</div>'
          '</div>' 。
        $('#showGroups').append(html)。
      }
    
  </script> 
</body> 

</html>/span>

uj5u.com熱心網友回復：

在上面的演示中修復了你所有的問題。點擊Run code snippet查看。

問題是你沒有使用動態元素id來渲染。

例如，在function addChildFilter()中，你仍然使用第一組的id $('#field').val()。你也應該把它動態化。

所以我為每個組添加一個id。id="group' count '"。然后，我可以通過let selectedField = $('#group' groupId).find('.field').first().val();

而且我們也可以在任何組中查詢欄位的值。

而且我們還必須通過$('#group' groupId).find('.showGroups').append(html);.

將新的HTML花費到正確的組中。

在所有的情況下，我們動態地添加/洗掉HTML。你應該使用類，或者使用帶有特定數字的元素Id來表示每個人。

。

<!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  ;
        let html = '< div id="group'   count   '" 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 class="form-select field" name=" filters[' count '][field]">'  'span class="hljs-name">select name ="filters> 
            '<option value="1"/span>> CheckBox</option>/span>' 
            '<option value="2"/span>> 顏色</選項>/span>' 
            '</select>/span>' 
            '</div>/span>' 
            '</div>/span>' 
            '< div id="showGroups" class="showGroups">/span> ' 
            '</div>'  '</' 
            '<div class="w-100 text-center">'  '<div>' 
            '<p>添加新的子組。</p>/span>' 
            '< 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"/span>> </i>/span>' 
            '</a>/span>' 
            '</div>/span>' 
            '</div>' 。
        $('#showFilters').append(html)。
    });
    函式 addChildFilter(groupId) {
        let selectedField = $('#group'   groupId).find('.field').first().val()。
        console.log(selectedField)。
        如果（selectedField == 1） {
            讓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>' 。
            $('#group'   groupId).find('.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>' 。
            $('#group'   groupId).find('.showGroups').append（html）。
        }
    
</script>/span>
</body> 
</html>/span>

uj5u.com熱心網友回復：

。

<!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> 
        < 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  ;
        let html = '< div id="group'   count   '" 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 class="form-select field" name=" filters[' count '][field]">'  'span class="hljs-name">select name ="filters> 
            '<option value="1"/span>> CheckBox</option>/span>' 
            '<option value="2"/span>> 顏色</選項>/span>' 
            '</select>/span>' 
            '</div>/span>' 
            '</div>/span>' 
            '< div id="showGroups" class="showGroups">/span> ' 
            '</div>'  '</' 
            '<div class="w-100 text-center">'  '<div>' 
            '<p>添加新的盒子。</p>/span>' 
            '< 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"/span>> </i>/span>' 
            '</a>/span>' 
            '</div>/span>' 
            '</div>' 。
        $('#showFilters').append(html)。
    });
    函式 addChildFilter(groupId) {
        let selectedField = $('#group'   groupId).find('.field').first().val()。
        console.log(selectedField)。
        如果（selectedField == 1） {
            讓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>' 。
            $('#group'   groupId).find('.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>' 。
            $('#group'   groupId).find('.showGroups').append（html）。
        }
    
</script>/span>
</body> 
</html>/span>

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

標籤：

上一篇：回圈中的Javascript只改變每第二個元素

下一篇：如何根據WAS的內容，將動態文本內容追加到現有文本內容的末尾？