Question

这是我的第一个问题。我有以下jquery代码：

$(document).ready(function(){  
    $("a").click(function(){
        $(this).parent("li").css({textDecoration: "line-through"});
        return false;
    });
 });

效果很好。它击中任何点击锚点的父li（html中有许多锚点和列表，而不仅仅是一个）。但我想要这个功能，没有别的。包含整个jquery库这不是一种过度杀伤吗？

Unfortunateley我不太了解原始javascript，有人可以为我转换这个吗？我将不胜感激。

编辑：哇，我对速度和答案的质量感到惊讶！所以首先要感谢大家！我会选择jonathon（edit2：roland）的解决方案，或者只是包含jquery。再次感谢！

Answer 1

这不是一个矫枉过正的内容整个jquery库？

你告诉我。您可以为Google托管的库提供服务，该库可能已在客户端缓存。

在我看来，保持一致是关键。如果你习惯了jQuery，为什么不继续使用呢？您的代码将更易于维护。

您可能会发现我之前的一个问题很有趣：When is it acceptable to use jQuery?

Answer 2

以下将以独立于浏览器的方式实现。

<html>

  <body onload="loaded()">
      ...content goes here....
      <script>
          function linkClickHandler(){
              var parentNode = this.parentNode;
              if(parentNode.tagName.toLowerCase()==="li"){
                  parentNode.style.textDecoration = "line-through";
              }
              return false;
          }

          function loaded(){
              for (var i=0, links = document.links, numLinks = links.length; i<numLinks; i++){
                  links[i].onclick = linkClickHandler;
              }
          }
      </script>
  </body>
</html>

Answer 3

非jQuery方法：

    [...your html...]

    <script type="text/javascript">
        var anchors    = document.getElementsByTagName("a");
        var numAnchors = anchors.length;
        for(var i = 0; i < numAnchors; i++) {
            var anchor = anchors[i];
            anchor.onclick = function() {           
                var parentEl = this.parentNode;
                if(parentEl.tagName.toLowerCase() == "li"){
                    parentEl.style.textDecoration = "line-through";
                }
                return false;   
            }
        }
    </script>
</body>

当您将页面加载添加到文档的最底部时，您甚至不需要onload处理程序。

Answer 4

如果你通过原始javascript进行操作，则需要向每个锚添加一个onclick事件，并为每个li添加一个id

<ul>   
    <li id='distinctID'><a href="javascript:strikeThrough('distinctId')">Click Me</a></li>
</ul>

这是你的HTML更改

function strikeThrough(id){
    var li = document.getElementById(id)
    li.style. textDecoration = "line-through"
}

这就是你的javascript功能

我建议您只包含JQuery，这样就不必添加大量的ID来标记

Answer 5

如果你永远不会对你的网站做更多的事情，也许这太过分了。以跨浏览器的方式执行与简短模糊操作相同的操作是一件令人头疼的事。这就是使用jQuery的价值：写一些东西并让它通常没有太多麻烦。如果您认为页面访问者额外的20KB带宽是一个不适当的负担，那么请开始阅读事件处理程序，DOM和CSS操作。

你说你不熟悉JS ......你是从其他人那里继承了这个jQuery的用法，还是从某个地方复制过它？

Answer 6

将一个看似简单的函数从jquery代码转换为原始的javascript代码有时会抓住一个跨浏览器的bug，一个膨胀的函数，以及将来你的需求增长的可能性。

使用jQuery来实现这样的功能并不过分，相信我。您现在永远不会想到将来可能需要的jQuery整洁功能。 jQuery在缩小形式时足够小，不会对页面加载产生任何差异。

原始javascript而不是jquery（示例如下）

6 个答案: