[英]How to add unique div on click button
当我选择例如联想并单击按钮时,伙计们会提供帮助让它独一无二?
$(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>
看起来您应该使用单选按钮而不是复选框<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>
换行。 看起来有些地方你放置了换行符,但它们没有出现。
将类型更改为 'type=radio'
对于 HTML,您只需要进行两次更改。
<!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>`);
});
})
});
但后来我选择宏碁并再次单击它再次创建的按钮联想然后宏碁
答:你有两个问题。
$('.button-filter').off("click");
.prop("checked")
无法正常工作,请改为 .is .is(":checked")
你可以在这里看到我的演示
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.