0

次のコードは、Firefox と chrome では正常に動作しますが、Internet Explorer では動作しません...

$("#nav-tabs").on("click", "a", function(e) {
    e.preventDefault();
    $(this).tab('show');
    $('li#test').each(function() {
        if($(this).attr('class') == "active")
        {
            //Active class is applied
            $(this).children().children().attr("src", "assets/img/button_home_selected3.png");
        }
        else
        {
            $(this).children().children().attr("src", "assets/img/button_home_plain.png");
        }
    });
});

IE の条件文に問題はありますか???

ここにHTMLがあります

<ul id="nav-tabs" data-tabs="tabs">
   <li id="test" style="list-style: none;" class="active">
        <a href="#home" data-toggle="tabs" ><img src="assets/img/button_home_selected3.png" id="test2"  width="83" /><span>Home</span></a>
   </li>
</ul>

さらに、li タグは動的に追加されます...

4

1 に答える 1

5

実際のhtmlによって異なりますがhasClass、要素に特定のクラスがあるかどうかを検出する場合は常に使用する必要があります

そのため、ifを変更します

if($(this).hasClass("active")

これは、属性の値が正確に値「アクティブ」activeである場合だけでなく、要素にクラスがある場合にも当てはまります。class

たとえば、持っている場合

<img class=" active image" />

その後hasClass("active")はtrueになりますが、テストはfalseになり、さらに

<img class=" active " />

アクティブな前後の空白のため、ブラウザによって扱いが異なる場合があります

コメントに基づいて編集

要素の位置だけに頼るべきではありません。位置に依存する必要がある唯一のシナリオは、位置自体が重要な場合です。たとえば、シマウマがテーブルを着色するとき

コードを次のように変更することをお勧めします

$("#nav-tabs").on("click", "a", function(e) {
    e.preventDefault();
    $(this).tab('show');
    $('li#test').each(function() {
        var self = $(this), 
        source = self.hasClass("active") ? 
                      "assets/img/button_home_selected3.png") :
                      "assets/img/button_home_plain.png";
        self.children().
            .find(img:first).attr("src", source);
    });
});

注意点がいくつかあります。

  • $(this) を複数回使用する場合。複数回選択するのではなく、ローカル変数に保存します
  • 要素が見つかった順序のみに依存するよりも、より具体的なセレクターを使用する
  • HTML が変更された場合にも、必要な要素のみを選択するように選択を絞り込みます。あなたの場合、別の画像を孫として li#test に追加するとsrc、両方の画像のコードが同時に変更されます
  • 異なる引数で同じ操作を 2 回実行する場合は、代わりに if を使用して入力を選択し、機能を 1 回だけ実装します。これにより、コードが読みやすくなり、維持しやすくなります。アクティブなクラスが存在するかどうかに基づいて画像のソースを選択し、それにsrc応じて設定する場合
于 2013-02-11T12:45:58.417 に答える