[英]Vanilla JavaScript: How to dynamically create a button that shows up after user has selected some text and then do something with that text?
[英]How do I target a button using vanilla JS or Jquery to see whether the user has selected it or not?
这是按钮的 html 代码。 用户有 3 个选项,并且只能选择一个。
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Camera Type:</legend>
<button class="ui-shadow ui-button" id="btnDSLR">DSLR<span class="ui-icon ui-icon-home"></span></button>
<button class="ui-shadow ui-button" id="btnPointAndShoot">Point & Shoot<span class="ui-icon ui-icon-home"></span></button>
<button class="ui-shadow ui-button" id="btnNoCamara">No Camara<span class="ui-icon ui-icon-home"></span></button>
</fieldset>
</div>
我认为它应该是这样的:
//Check Camara Type.
if (document.getElementById("btnDSLR").checked)
{
camara += "DSRL";
}
我不知道如何检索用户选择了哪个选项。
谢谢!
像这样。
jQuery :
$(".ui-button").on("click",function(e) { const $tgt = $(this) console.log($tgt.attr("id"),$tgt.text()); })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Camera Type:</legend> <button class="ui-shadow ui-button" id="btnDSLR">DSLR<span class="ui-icon ui-icon-home"></span></button> <button class="ui-shadow ui-button" id="btnPointAndShoot">Point & Shoot<span class="ui-icon ui-icon-home"></span></button> <button class="ui-shadow ui-button" id="btnNoCamara">No Camara<span class="ui-icon ui-icon-home"></span></button> </fieldset> <span id="which"></span> </div>
普通/Vanilla JS需要委托
document.querySelector("fieldset[data-role=controlgroup]").addEventListener("click",function(e) { const tgt = e.target; if (tgt.parentNode.classList.contains("ui-button")) tgt = tgt.parentNode; // clicked the span if (tgt.classList.contains("ui-button")) { console.log(tgt.id,tgt.textContent); } })
<div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Camera Type:</legend> <button class="ui-shadow ui-button" id="btnDSLR">DSLR<span class="ui-icon ui-icon-home"></span></button> <button class="ui-shadow ui-button" id="btnPointAndShoot">Point & Shoot<span class="ui-icon ui-icon-home"></span></button> <button class="ui-shadow ui-button" id="btnNoCamara">No Camara<span class="ui-icon ui-icon-home"></span></button> </fieldset> <span id="which"></span> </div>
您可以使用jquery
简单地获取如下按钮的text
$('.ui-button').click(function() { console.log( $(this).text() ); })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Camera Type:</legend> <button class="ui-shadow ui-button" id="btnDSLR">DSLR<span class="ui-icon ui-icon-home"></span></button> <button class="ui-shadow ui-button" id="btnPointAndShoot">Point & Shoot<span class="ui-icon ui-icon-home"></span></button> <button class="ui-shadow ui-button" id="btnNoCamara">No Camara<span class="ui-icon ui-icon-home"></span></button> </fieldset> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.