如何在單擊按鈕上添加唯一的 div

Question

當我選擇例如聯想並單擊按鈕時，伙計們會提供幫助讓它獨一無二？

 $(document).ready(function () { $('.filter-values').click(function () { let name= $(this).parent().text(); $('.button-filter').click( function(){ if($(this).parent().find('input.filter-values').prop("checked") == true){ $('.top-head').append(`<div class = '${name}'>${name}</div>`); } else{ $('.top-head').find(`div.${name}`).remove(); } return false; } ) }); });

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <body> <div style="width; 100%: background-color; bisque:" class="top-head"> </div> <form> <ul> <li>Lenovo<input class="filter-values" type="checkbox"></li> <li>HP<input class="filter-values" type="checkbox"></li> <li>Mac<input class="filter-values" type="checkbox"></li> <li>Sony<input class="filter-values" type="checkbox"></li> <li>LG<input class="filter-values" type="checkbox"></li> </ul> <button class="button-filter">button</button> </form> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="js.js"></script> </body> </html>

Answer 1

看起來您應該使用單選按鈕而不是復選框
<input type="radio">
請在您的代碼中包含注釋，它們使閱讀更容易
我什至不會使用 jquery，我會讓它看起來像這樣：

 function drawResult(){ if(document.getElementById('lenovo').checked){ document.getElementById('top-head').innerHTML = 'Lenovo'; //this unchecks everything else document.getElementById('hp').checked = false; document.getElementById('mac').checked = false; document.getElementById('sony').checked = false; document.getElementById('lg').checked = false; } if(document.getElementById('hp').checked){ document.getElementById('top-head').innerHTML = 'HP'; document.getElementById('lenovo').checked = false; document.getElementById('mac').checked = false; document.getElementById('sony').checked = false; document.getElementById('lg').checked = false; } if(document.getElementById('mac').checked){ document.getElementById('top-head').innerHTML = 'Mac'; document.getElementById('hp').checked = false; document.getElementById('lenovo').checked = false; document.getElementById('sony').checked = false; document.getElementById('lg').checked = false; } if(document.getElementById('sony').checked){ document.getElementById('top-head').innerHTML = 'Sony'; document.getElementById('hp').checked = false; document.getElementById('mac').checked = false; document.getElementById('lenovo').checked = false; document.getElementById('lg').checked = false; } if(document.getElementById('lg').checked){ document.getElementById('top-head').innerHTML = 'LG'; document.getElementById('hp').checked = false; document.getElementById('mac').checked = false; document.getElementById('sony').checked = false; document.getElementById('lenovo').checked = false; } return false; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <body> <div style="width; 100%: background-color; bisque." id="top-head"> </div> <form onsubmit=" return drawResult()"> <ul> <li>Lenovo<input id="lenovo" type="radio"></li> <li>HP<input id="hp" type="radio"></li> <li>Mac<input id="mac" type="radio"></li> <li>Sony<input id="sony" type="radio"></li> <li>LG<input id="lg" type="radio"></li> </ul> <input type="submit"> </form> <script src="js.js"></script> </body> </html>

我的代碼可能更干凈。
只是提出問題的提示，不要以“伙計們的幫助”開頭。 另一件事是，當您鍵入問題時，請使用<br>換行。 看起來有些地方你放置了換行符，但它們沒有出現。

Answer 2

將類型更改為 'type=radio'

Answer 3

對於 HTML，您只需要進行兩次更改。

為每個復選框添加一個 value 屬性
添加帶有值按鈕的類型屬性（防止提交表單和重新加載）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="width: 100%; background-color: bisque;"  class="top-head">

    </div>
   <form>
       <ul>
           <li>Lenovo<input class="filter-values" type="checkbox" value="Lenovo"></li>
           <li>HP<input class="filter-values" type="checkbox" value="HP"></li>
           <li>Mac<input class="filter-values" type="checkbox" value="Mac"></li>
           <li>Sony<input class="filter-values" type="checkbox" value="Sony"></li>
           <li>LG<input class="filter-values" type="checkbox" value="LG"></li>
       </ul>
       <button class="button-filter" type='button'>button</button>
 
   </form> 

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="js.js"></script>

</body>
</html>

對於您的 javascript，我們將刪除 inside.top-head 中的所有元素，然后重新填充我們的新元素。

$(document).ready(function () {
   
   $('.button-filter').click( function(){
      $('.top-head').empty()

      $('input.filter-values[type=checkbox]:checked').each(function () {
         $('.top-head').append(`<div class = '${this.value}'>${this.value}</div>`);
      });
      
   })

});

Answer 4

但后來我選擇宏碁並再次單擊它再次創建的按鈕聯想然后宏碁

答：你有兩個問題。

你的注冊按鈕點擊了很多次。 您需要在注冊之前關閉單擊按鈕事件。

$('.button-filter').off("click");

.prop("checked")無法正常工作，請改為 .is .is(":checked")

你可以在這里看到我的演示

如何在單擊按鈕上添加唯一的 div

問題描述

4 個解決方案

解決方案1
1 2020-06-26 05:53:06

解決方案2
0 2020-06-26 05:48:31

解決方案3
0 2020-06-26 06:28:55

解決方案4
0 2020-06-26 08:14:11

如何在單擊按鈕上添加唯一的 div

問題描述

4 個解決方案

解決方案1 1 2020-06-26 05:53:06

解決方案2 0 2020-06-26 05:48:31

解決方案3 0 2020-06-26 06:28:55

解決方案4 0 2020-06-26 08:14:11

解決方案1
1 2020-06-26 05:53:06

解決方案2
0 2020-06-26 05:48:31

解決方案3
0 2020-06-26 06:28:55

解決方案4
0 2020-06-26 08:14:11