Question

我需要让几个按钮弹出不同的菜单，但我似乎无法让我的JQuery只调用一次。这是w3中示例代码的几乎完全相同的副本，但出于某种原因，每当我点击任何按钮时，它们都会一个接一个地弹出。

HTML：

<p id="Chombas"> Chombas </p>
<p id="Buzos"> Buzos </p>

<script src="jquery-3.3.1.js">
</script>
<script src="calc2.js"></script>

JS：

$(document).ready("#Chombas").click(function() {
      alert('CHOMBAS');
});
$(document).ready("#Buzos").click(function() {
      alert('BUZOS');
});

请帮忙！

Answer 1

$(document).ready接受函数作为参数，而不是要链接的选择器。仅在一个$(document).ready中包装您的脚本，然后相应地附加侦听器：

$(document).ready(() => {
  $("#Chombas").click(function() {
    alert('CHOMBAS');
  });
  $("#Buzos").click(function() {
    alert('BUZOS');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="Chombas"> Chombas </p>
<p id="Buzos"> Buzos </p>

Answer 2

$(document).ready(function () { 
    $('#foo').click(function(e) {
        alert('foo');
    });

    $('#bar').click(function(e) {
        alert('bar');
    });
})

尝试替换为此。

Answer 3

＆＃13;

$('#button-nav').on('click','p', function (evt) {
    alert($(this).text());
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button-nav">
    <p id="Chombas"> Chombas </p>
    <p id="Buzos"> Buzos </p>
</div>

＆＃13;

您可以尝试这样做以避免写重复代码

所有关于jquery中的id的警报

3 个答案: