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

Nowadays, the usage of data-* attributes is common for hold relevant information about the events associated to an element.

First you could use an data-attribute to keep track of the elements you want to apply an action to, data-linker.

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

And an alternative data-attribute holding a relevant information i.e. options related to the action to be applied, data-linker-target.

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

A basic jQuery function may be:

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

Usage:

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

除了所有文档准备就绪之外，您并没有那么兴奋。

这是一个小提琴。

这是代码。

$(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 的一种方法：

$(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 回答