0

この長いスクリプトを以下に示しますが、より適切に記述できることがわかっています。JS で要素を変更する必要がある非常に重い JS のサイトがあります。これが以下の内容です。しかし、より効率的にするために、これを別の方法で書くことができることはわかっています。私はJSがあまり得意ではないので、この長い方法で書かれています。

どんな助けでも素晴らしいでしょう！

        <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

スクリプトを完全に書き直すことなく、いくつかの提案を以下に示します。

  1. JS を別の JS ファイルに配置します。
  2. JS を複数の<script>ブロックで分離する必要はなく、複数の準備済み関数も必要ありません。
  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 に答える
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

ところで、別のスクリプト ブロックに分割しないでください。

<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 に答える