javascript - 如何使用 vanilla JS 或 Jquery 定位按钮以查看用户是否选择了它?
问题描述
这是按钮的 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>
Plain/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>
推荐阅读
- c++ - no Operator "=" 匹配这些操作数,操作数类型 -- Matrix = Matrix
- angular - Angular:只有无效和外来元素可以自封闭“数据列表”
- python - 在 Heroku 上部署 Django 项目时出错
- javascript - 如何在 JS 中创建“char**”变量?
- php - 背景颜色做了奇怪的事情
- javascript - Dropzone 没有选择配置
- laravel - 函数 Database\Seeders\DatabaseSeeder::Database\Seeders\{closure}() 的参数太少
- image - 在 Flutter 中,如何从特定的“纹理坐标”显示图像并裁剪其余部分?
- c# - 负时间跨度到负时间双倍
- python - 错误 tweepy.errors.Forbidden: 403 Forbidden