1

ビューに次のjqueryがあります。

$(document).ready(function() {
    $(function() {
        $('#link1').click(function() {
            $('#link2').show();
            $('#link1').hide();
            $('#frame').attr('src', 'http://google.com/');
        });
    });
});

$(document).ready(function() {
    $(function() {
        $('#link2').click(function() {
            $('#link1').show();
            $('#link2').hide();
            $('#frame').attr('src', 'http://yahoo.com/');
        });
    });
});

ページロード時に、link2は非表示に設定されます。jQuery の機能は次のとおりです。id のリンクをlink1クリックすると、id のリンクが表示され、それlink2自体が非表示になります。およびその逆。

私の問題は、私の jQuery コードがまだ単純化できるように見えることです。よりシンプルなバージョンでやりたいことができる他の方法はありますか? 助けてくれてありがとう！

作業例：http://jsfiddle.net/cuJBm/

4

3 に答える 3

3 
$(document).ready(function() {
    $(function() {
      var linkSet = $('#link1').add('#link2')
      linkSet.click(function() {
        linkSet.toggle();
      });
    });
});

add メソッドを使用すると、マッチャーのセットに別のセレクターを追加できるため、両方のクリックを同時にバインドできます。構築されたセットを変数 ( linkSet) に保存することで、DOM を 2 回トラバースする必要がなくなります。

ここでの仮定は、次の 2 つだけです。

1) 初期状態では 1 つしか見えないこと。

2) id 構造が意味があり、有用であり、クラスでは不十分であること。

http://jsfiddle.net/cuJBm/1/

属性の設定に関する 2 番目の質問に答えるには#frame。これを行うには多くの方法があります。おそらく最も簡単な方法は、.click ハンドラー ( の後にtoggle) に以下を追加することです。

if ($(this).attr('id')=='link1'){
    $('#frame').attr('src', 'www.google.com');
} else if ($(this).attr('id')=='link2'){
    $('#frame').attr('src', 'www.yahoo.com');
}

個人的には、おそらく次のようなカスタム属性をリンク要素に追加します。

<a id='link1' iframe-source='www.google.com'>
<a id='link2' iframe-source='www.yahoo.com'>

次に: (再び、 の直後toggle):

source = $(this).attr('iframe-source');
$('#frame').attr(src, source);

ソース if を保存する理由は、 on$(this)内に入ろうとすると、(いつものように) 現在一致している要素、つまり..attr$('frame')$('#frame')

別の方法として (上記の方法と非常によく似ています)、リンクの innerHTML を使用することもできます。例えば：

<a id='link1'>link1<span style="display:none">www.google.com</span></a>
<a id='link2'>link2<span style="display:none">www.yahoo.com</span></a>

次に: (トグルの直後):

source = $(this).find('span').text();
$('#frame').attr(src, source);

個人的には、この最後の方法は DOM 構造を汚染し、レンダリング時間が少し長くなり、(私の意見では) コードが読みにくくなるため、嫌いです。実際には、3 つの方法はすべて問題なく機能します。

于 2013-08-06T06:48:33.453 に答える
1

jQuery を使用するtoggle()

これを追加するだけです

<a href="http://google.com/" target="frame" id="link1"> Google </a>
<a href="http://yahoo.com/" target="frame" id="link2"> Yahoo </a>

ターゲットはフレームのIDです

$(function() {
  $('#link1, #link2').click(function() {
    $('#link1, #link2').toggle();
  });
});
于 2013-08-06T06:52:29.027 に答える