我可以在我的 jquery 脚本中使用按钮的 id 作为点击功能吗？ [关闭]答案

【问题标题】：Can i use a button's id for a click function in my jquery script? [closed]我可以在我的 jquery 脚本中使用按钮的 id 作为点击功能吗？ [关闭]
【发布时间】：2012-11-04 00:49:49
【问题描述】：

每次我尝试将以下代码添加到我的网站时，页面上的每个 <a href> 链接都会打开。如何在不打开每个<a href> 链接的情况下使此代码正常工作，而不是使用单击功能，我可以使用按钮及其 id 代替吗？

<!DOCTYPE html>
<html>
<head>
  <style>
      p.one { position:relative; width:400px; height:90px; }
      div.two { position:absolute; width:400px; height:65px; 
        font-size:36px; text-align:center; 
        color:yellow; background:red;
        padding-top:25px; 
        top:0; left:0; display:none; }
        span.three { display:none; }
      </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p class="one">
        Let it be known that the party of the first part
        and the party of the second part are henceforth
        and hereto directed to assess the allegations
        for factual correctness... (<a href="#">click!</a>)
        <div class="two"><span class="three">Click here to continue...</span></div>

      </p>
<script>
        $("a").click(function () {
          $("div").fadeIn(3000, function () {
            $("span").fadeIn(100);
          });
          return false;
        }); 

      </script>

</body>
</html>

【问题讨论】：

你应该先学习 html 和 css 选择器
无法理解问题所在。请改写你的问题。
你为什么不尝试你正在做的事情？你有代码，发布问题和格式化代码比尝试使用你提到的按钮和 ID 更容易吗？
这里显示的代码可以正常工作jsfiddle.net/rZKP3

标签： jquery function tags click href

【解决方案1】：

你需要通过 jquery 使用id selector。

$("#YourButtonId").click(function () {
      $("div").fadeIn(3000, function () {
        $("span").fadeIn(100);
      });
      return false;
});

【讨论】：

感谢您的宝贵时间...当我在记事本中测试然后在浏览器中测试时，它本身工作正常...但是在我的网站上，当我单击它时它仍然会打开其他东西

【解决方案2】：

你可以使用this关键字来引用被点击的元素。

$(function() {
   $(".one a").click(function(event) {
      $(this).next('div').fadeIn(3000, function(){
         $('span', this).fadeIn();
      })
      event.preventDefault();
   }); 
})

请注意，您的标记是无效的，在 P 标签中使用 DIV 标签会使您的文档无效并且不是语义，大多数浏览器将 DIV 元素放在 P 标签之外，您当前的代码有效只是因为你选择了所有的 DIV 元素，如果你根据你当前的标记遍历 DOM（像我一样）你会得到意想不到的结果。

<div class="one">
    <p>
       Let it be known that the party of the first part
       and the party of the second part are henceforth
       and hereto directed to assess the allegations
       for factual correctness...
    </p>
    <a href="#">click!</a>
    <div class="two"><span class="three">Click here to continue...</span></div>
</div>

还要注意，当一个父元素被隐藏时，它的所有子元素也都被隐藏了，所以不需要隐藏子元素并一一显示。隐藏和显示父元素就足够了。

http://jsfiddle.net/BhJJa/

【讨论】：

【解决方案3】：

这是因为您将单击事件绑定到 HTML 文档中的每个 <a>。你需要给你 button/a 一个 id 来用 jQuery 选择它

jQuery

$("#btnID").click(function() {
 $("div").fadeIn(3000, function () {
  $("span").fadeIn(100);
 });
 return false;
});

HTML

<a href="javascript:void(0);" id="btnID">click!</a>

您也可以将其与<button> 标签一起使用。

【讨论】：

是的，当我单独测试它时它工作正常......但是当我把它放在我的网站上时，当我点击它时它仍然会打开其他东西
那是因为我在选择器中的代码有错误。我改了