0

我在下面有这个很长的脚本，我知道可以写得更好。我们有一个非常重的 JS 网站，我需要用 JS 更改元素，这就是我下面的内容。但是我知道这可以打赌以不同的方式编写以提高效率。我对 JS 不是很好，这就是为什么它是以这种 LONG 方式编写的。

任何帮助都会很棒！

        <script type="text/javascript">
           jQuery(document).ready(function() {
           var html = $("#tab7 a").html().split(" ");
           html = html[0] + "<br>" + html.slice(1).join(" ");
           jQuery("#tab7 a").html(html);
           jQuery("#tab7 a").css({"line-height" : "16px","text-align" : "center","padding-top" : "29px","height" : "49px"});
        });
        </script>
        <script type="text/javascript">
           jQuery(document).ready(function() {
           var html = $("#tab9 a").html().split(" ");
           html = html[0] + "<br>" + html.slice(1).join(" ");
           jQuery("#tab9 a").html(html);
           jQuery("#tab9 a").css({"line-height" : "16px","text-align" : "center","padding-top" : "29px","height" : "49px"});
        });
        </script>

        <script type="text/javascript">
           jQuery(document).ready(function() {
           var html = $("#tab10 a").html().split(" ");
           html = html[0] + "<br>" + html.slice(1).join(" ");
           jQuery("#tab10 a").html(html);
           jQuery("#tab10 a").css({"line-height" : "16px","text-align" : "center","padding-top" : "29px","height" : "49px"});
        });
        </script>
4

4 回答 4

1

顺便说一句，你不应该分成不同的脚本块。

<script>
jQuery(document).ready(function(){
  var tabs = ["tab7", "tab9", "tab10"];
  jQuery.each(tabs, function(index, value){
    var el = $("#"+value+" a");
    var html = el.html().split(" ");
    html = html[0] + "<br>" + html.slice(1).join(" ");
    el.html(html);
    el.css({"line-height" : "16px","text-align" : "center","padding-top" : "29px","height" : "49px"});
  });
});
</script>
于 2013-10-01T14:18:54.567 回答
1

使用所有项目的通用类将其缩减为单个处理程序会更好

    jQuery(document).ready(function() {
       $(".tab a").each(function() {
           var html = $(this).html().split(" ");
           html = html[0] + "<br>" + html.slice(1).join(" ");
           $(this).html(html);
       });
    });

然后您将以下 CSS 应用于页面：

<style type="text/css">
.tab a {
    line-height:16px;
    text-align:center;
    padding-top:29px;
    height:49px;
}
</style>

这样，<a>元素中的每个元素class='tab'都将具有相同的样式，并且 jQuery 代码显着缩短，因为 jQuery 将自动找到与参数匹配的每个元素，并使用该方法遍历它们.each并应用更改。

于 2013-10-01T14:13:37.907 回答
1

在不完全重写脚本的情况下，这里有一些建议：

  1. 将 JS 放在单独的 JS 文件中。
  2. 不需要用多个<script>block来分隔JS，也不需要多个ready函数。
  3. 在一致性方面，使用 jQuery 或 $，而不是两者
  4. 由于正在复制代码，因此请使用循环并替换相应的值。

在单独的 .js 文件中它看起来像这样（减去循环）：

$(function () {
    var html = $("#tab7 a").html().split(" ");
    html = html[0] + "<br>" + html.slice(1).join(" ");
    $("#tab7 a").html(html);
    $("#tab7 a").css({
        "line-height": "16px",
            "text-align": "center",
            "padding-top": "29px",
            "height": "49px"
    });

    html = $("#tab9 a").html().split(" ");
    html = html[0] + "<br>" + html.slice(1).join(" ");
    $("#tab9 a").html(html);
    $("#tab9 a").css({
        "line-height": "16px",
            "text-align": "center",
            "padding-top": "29px",
            "height": "49px"
    });

    html = $("#tab10 a").html().split(" ");
    html = html[0] + "<br>" + html.slice(1).join(" ");
    $("#tab10 a").html(html);
    $("#tab10 a").css({
        "line-height": "16px",
            "text-align": "center",
            "padding-top": "29px",
            "height": "49px"
    });
});
于 2013-10-01T14:14:40.520 回答
0

我会在元素中添加一个类，并用方法将它们交给每个元素.each。它遍历.className选择器返回的数组的每个元素。 

 $(function() {
    $(".tab-link").each(function(){
       var html = $(this).html.split(" ");
       html = html[0] + "<br/>" + html.slice(1).join(" ");
       $(this).html(html);
       $(this).css({"line-height" : "16px","text-align" : "center","padding-top" : "29px","height" : "49px"});
    });
 });

jQuery 文档

于 2013-10-01T14:21:22.857 回答