javascript - 单击或选择的选定通知按钮上的 jQuery

标签 javascript jquery

我有 4 个按钮,我希望能够检测到哪个按钮被单击或按 Tab 键并用空格键选择。但我无法让按钮发出警报。有人可以帮我检测选择了哪个按钮吗?

<div id="searchoptions">
        <div class="col-sm-3">
            <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="accountNumber" name="accountNumber" value="accountNumber">PROPERTY ID</button>
        </div>
        <div class="col-sm-3">
            <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="name" name="name" value="name">OWNER NAME</button>
        </div>
        <div class="col-sm-3">
            <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="location" name="location" value="location">PROPERTY ADDRESS</button>
        </div>
        <div class="col-sm-3">
            <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="billingAddress" name="billingAddress" value="billingAddress">BILLING ADDRESS</button>
        </div>
    </div>

$(document).on('click', '#accountNumber, #name, #location, #billingAddress,', function() {

var value = $(this).val();
alert(value);
    if (value === "accountNumber") {

        alert("accountNumber");

    } else if (value === "name"){

        alert("name");

    } else if (value === "location"){

        alert("location");

    } else if (value === "billingAddress"){

        alert("billingAddress");

    }

});

也尝试过:

$('input[type=button]').each(function(){

    var value = $(this).val();

    if (value === "accountNumber") {

        alert("accountNumber");

    } else if (value === "name"){

        alert("name");

    } else if (value === "location"){

        alert("location");

    } else if (value === "billingAddress"){

        alert("billingAddress");

    }

});

最佳答案

删除选择器字符串处的尾随逗号 ,。您还可以使用选择器#searchoptions 按钮

$(document).on('click', '#searchoptions button', function() {

   console.log(this.value)

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="searchoptions">
  <div class="col-sm-3">
    <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="accountNumber" name="accountNumber" value="accountNumber">PROPERTY ID</button>
  </div>
  <div class="col-sm-3">
    <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="name" name="name" value="name">OWNER NAME</button>
  </div>
  <div class="col-sm-3">
    <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="location" name="location" value="location">PROPERTY ADDRESS</button>
  </div>
  <div class="col-sm-3">
    <button type="button" class="btn-u btn-default input-sm margin-bottom-10" id="billingAddress" name="billingAddress" value="billingAddress">BILLING ADDRESS</button>
  </div>
</div>

关于javascript - 单击或选择的选定通知按钮上的 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42513589/

相关文章:

javascript - 复选框 : disable/enable href in jQuery

javascript - 使用 d3.js TreeMap 图 block 响应文本

javascript - 让 jQuery 在新构建的 WordPress 主题中工作

javascript - 如何在 JavaScript 中定义实例化函数的行为

javascript - 如何使用 Webpack 将 vendor CSS 文件捆绑到 React 应用程序中?

javascript - 更改 Window.print() 纸张方向

jquery - 如何向此弹出窗口添加加载 gif,然后将其删除?

JavaScript:从对象数组中获取唯一值及其计数?

javascript - 是否有可用的基于 Javascript 的良好 HTML 解析库?

javascript - jQuery:强制显示修改后的dom