1

リンクにカーソルを合わせると、非表示のコンテンツを表示しようとしています。コンテンツはリンクごとに一意です。私はそれをうまく機能させていますが、jQueryコードがひどいことを知っています。「.this」は秘密だと思いますが、うまくいきません。何かご意見は？これはこれまでで最も醜い非効率的ながらくたjQueryですが、私はこれを理解しようとしています。ありがとう！

jQuery

          $(document).ready
      (
        function(){
            $(".short-term-trigger").hover(function(){
             $(".short-term").toggleClass("visible");
             });
          }
    )

    $(document).ready
      (
        function(){
            $(".medium-term-trigger").hover(function(){
             $(".medium-term").toggleClass("visible");
             });
          }
    )

    $(document).ready
      (
        function(){
            $(".long-term-trigger").hover(function(){
             $(".long-term").toggleClass("visible");
             });
          }
    )

    $(document).ready
      (
        function(){
            $(".retirement-trigger").hover(function(){
             $(".retirement").toggleClass("visible");
             });
          }
    )

HTML

<ul id="goal-btns">
            <li><a class="short-term-trigger" href="#">Short-Term Gains</a></li>
            <li><a class="medium-term-trigger" href="#">Medium Term Goals</a></li>
            <li><a class="long-term-trigger" href="#">Long Term Goals</a></li>
            <li><a class="retirement-trigger" href="#">Retirement</a></li>
        </ul>

        <div class="talk-bubble hang-left short-term">
            <p class="bubble-text">I’ll need the money is less than 12 months.</p>
        </div><!--/short-gains-->

        <div class="talk-bubble hang-right medium-term">
            <p class="bubble-text">I don’t need the money immediately but may need it within the next 6-10 years.</p>
        </div><!--/short-gains-->

        <div class="talk-bubble hang-right long-term">
            <p class="bubble-text">I’m investing for the long-term.</p>
        </div><!--/short-gains-->

        <div class="talk-bubble hang-right retirement">
            <p class="bubble-text">I’m investing for my retirement.</p>
        </div><!--/short-gains-->
4

4 に答える 4

3

次のことを試してください。

$(document).ready(function() {
    $('#goal-btns li a').hover(function() {
        var cls = this.className.replace('-trigger', '');
        $("."+cls).toggleClass("visible");
    });
})

http://jsfiddle.net/2NnX9/

于 2012-09-20T18:36:42.003 に答える
1

現在、data-*属性の使用は、要素に関連付けられたイベントに関する関連情報を保持するために一般的です。

まず、データ属性を使用して、アクションを適用する要素を追跡できますdata-linker。

<a data-linker href="#">Retirement</a>

関連情報、つまり適用されるアクションに関連するオプションを保持する代替データ属性data-linker-target。

<a data-linker data-linker-target=".retirement" href="#">Retirement</a>

基本的な jQuery 関数は次のようになります。

$.fn.linker = function(){
  return this.each(function(){
    var $this = $(this), data = $this.data(), $target = $(data.linkerTarget);
    $this.hover(function(){
      $target.toggleClass("visible");
    });
  });
};

使用法：

$("[data-linker]").linker();
于 2012-09-20T18:39:50.420 に答える
0

すべての document.ready を除いて、あなたはそれほどオフではありませんでした。

これがフィドルです。

これがコードです。

$(document).ready(function(){
            $(".short-term-trigger").hover(function(){
                 $(".short-term").toggle();
            });

      $(".medium-term-trigger").hover(function(){
                $(".medium-term").toggle();
            });

     $(".long-term-trigger").hover(function(){
             $(".long-term").toggle();
             });

      $(".retirement-trigger").hover(function(){
             $(".retirement").toggle();
             });
 })

しかし、本当に最適化したい場合は、これを使用します。

 $(document).ready(function(){
            $("#goal-btns li a").hover(function(){
                 $('div.' + $(this).attr('data-ref')).toggle();
            });

 })

要素に属性 data-ref を追加するだけです。

于 2012-09-20T18:36:36.177 に答える
0

jQuery をすべて削減する 1 つの方法を次に示します。

$(document).ready(function() {
    $(".short-term-trigger,.medium-term-trigger,.long-term-trigger,.retirement-trigger").hover(function() {
        $("." + $(this).attr('class').slice(0, -8)).toggleClass("visible");
    });
});​

jsFiddle の例

于 2012-09-20T18:36:48.270 に答える