Question

我试图在链接悬停时显示一些隐藏的内容。每个链接的内容都是唯一的。我有它工作正常，但我知道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-->

Answer 1

尝试以下方法：

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

http://jsfiddle.net/2NnX9/

Answer 2

如今，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();

Answer 3

除了所有的文件以外，你不是那样的。已经。

Here's a fiddle.

这是代码。

$(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();
             });
 })

但如果你真的想要优化，你将使用this。

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

 })

您只需要在元素中添加属性data-ref。

Answer 4

这是减少所有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 example

jQuery在链接的悬停显示隐藏的div

4 个答案: