Question

我正在使用JQuery＆＃39; .click功能，我的网站上有多个按钮。单击一个按钮将执行HTML文档中的每个.click函数。有没有办法让一个按钮执行一个.click？我在下面提供了一些代码来说明我的问题。单击第一个按钮＆＃34;单击我！＆＃34;将执行我的HTML文档中的所有函数。我如何制作按钮＆＃34; Click Me！＆＃34;不执行我的文档中的每个功能？

<!DOCTYPE html>

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

        <title>
            My Website
        </title>
        <meta http-equiv="Content-Type"
              content="text/html; charset=UTF-8">


    </head>
    <body>

        <button>
            Click Me!
        </button>      

        <button onclick="document.body.style.backgroundColor='blue';">
            Change BG color
        </button>


        <script>
            $(document).ready(function () {

               $("button").click(function(){
                   $("#d").hide();
               }); 

            });

            $(document).ready(function () {
               $("button").click(function(){
                   $("#f").fadeToggle(3000);
               }); 

            });

        </script>

    <button>Toggle fade</button>


            <div>
            <p id="d">Some text here.</p>
            </div>

        <div>
            <p id="f">Some text to fade.</p>
        </div>

    </body>
</html>

*更新所以我将脚本更改为以下内容：

$(document).ready(function () {

               $('#button1').click(function(){
                   $("#d").hide();
               }); 

            });

当我点击按钮时没有任何反应。这是正确的语法吗？这种语法用于W3Schools。

Answer 1

是的。在该按钮上放置ID或类，以便您可以更具体地选择它。

<button id="button1">foo</button> <button id="button2">bar</button>

$('#button1').on('click', function(){ $("#d").hide(); }); $('#button2').on('click', function(){ console.log("button2"); });

Answer 2

如果您使用$("button")，则您提供的click()功能将适用于所有按钮。我建议给你的按钮一个id，然后使用：

$("#myButtonId").click(function(){
    $("#d").hide();
});

JQuery selectors对于定位DOM中的元素非常有用。

Answer 3

您应该按下按钮和ID或类：

<button id="myButton">Test</button>

然后使用以下点击事件：

$("#myButton").click(function(){
 ...
});

单击不同按钮时如何分离功能执行

3 个答案: