制作更智能的 jQuery 代码

Question

我想知道是否有人知道如何重写这个简单的 jquery 代码以提高效率。它现在当然工作正常，但我想再添加 10 个项目会使代码变得非常大。我想也许我可以将类添加到数组中并使用某种循环？不过不确定这是否是正确的方法。

这是在 jsfiddle 上： http://jsfiddle.net/QVS9X/42/

这是一个示例： JS：

$(".image1").mouseout(function() {
    $(".default").show();
    $(".cat1").hide();
}).mouseover(function() {
    $(".default").hide();
    $(".cat1").show();
});

$(".image2").mouseout(function() {
    $(".default").show();
    $(".cat2").hide();
}).mouseover(function() {
    $(".default").hide();
    $(".cat2").show();
});

HTML：

<div class="image1 image">
    <p>Hover for cat 1</p>
</div>
<div class="image2 image">
    <p>Hover for cat 2</p>
</div>
<div class="image3 image">
    <p>Hover for cat 3</p>
</div>
<div class="default">
    <p>Default Text</p>
</div>
<div id="cats">
    <p class="cat1">Category 1 text</p>
    <p class="cat2">Category 2 text</p>
    <p class="cat3">Category 3 text</p>
</div>

Answer 1

如果你可以在当前有image1、image2等的div上放一个图片类，那么你可以这样做：

$(".image").hover(function() {
    $(".default").toggle();
    $("#cats p").eq($(this).index()).toggle();
}); 

这假定图像 div 将与 #cats 中的 p 标签的顺序相同。

http://jsfiddle.net/QVS9X/44/

使用数据属性的示例：

JS：

$(".image").hover(function() {
    $(".default").toggle();
    $($(this).data('id')).toggle()    
});  

HTML：

<div class="image" data-id="#cat1">
    <p>Hover for cat 1</p>
</div>
<div id="cats">
    <p id="cat1">Category 1 text</p>
</div>

http://jsfiddle.net/QVS9X/55/

Answer 2

var myDefault = $(".default");
var myCat1 =    $(".cat1");
var myCat2 =    $(".cat2");

然后

$(".image1").mouseout(function() {
    myDefault.show();
   myCat1.hide();
    }).mouseover(function() {
        myDefault .hide();
        myCat1 .show();
 });

$(".image2").mouseout(function() {
    myDefault.show();
    myCat2.hide();
    }).mouseover(function() {
       myDefault.hide();
        myCat2.show();
});

会减少dom遍历，improve performance

Answer 3

http://jsfiddle.net/QVS9X/45/ 例如

<div class="image" data-id="1">
  <p>Hover for cat 1</p>
</div>
<div class="image" data-id="2">
  <p>Hover for cat 2</p>
</div>
<div class="image" data-id="3">
  <p>Hover for cat 3</p>
</div>
<div class="default">
  <p>Default Text</p>
</div>
<div id="cats">
  <p class="cat1">Category 1 text</p>
  <p class="cat2">Category 2 text</p>
  <p class="cat3">Category 3 text</p>
</div>

$(document).ready(function() {

   $(".image").mouseout(function() {
        $(".default").show();
        $(".cat"+$(this).data('id')).hide();
   }).mouseover(function() {
            $(".default").hide();
            $(".cat"+$(this).data('id')).show();
   });

});

Answer 4

首先，如果目标 div 尚未包含在父 div 中，我会将它们包装起来 - 像这样：

<div id="images">
  <div class="image1">
    <p>Hover for cat 1</p>
  </div>

   etc..
</div>

然后你可以绑定一个事件处理程序来处理你所有的情况 -

$('#images').delegate('div[class^=image]', 'mouseenter mouseleave', function(e) {
   $('.default').toggle(e.type === 'mouseleave');
   $('#cats p').eq($(this).index()).toggle(e.type !== 'mouseleave');
});

编辑

实际上，您可以通过删除“image1”、“image2”、“image3”并将类命名为“image”来进一步清理它。您还可以从#cats 中的<p> 中删除该类

见这里修改后的例子 - http://jsfiddle.net/QVS9X/50/

编辑 2

有一天，您将动态添加一个 cat div，并想知道为什么事件处理程序不起作用...然后您将重新访问我的答案 :) 就像...约翰确实有一个 100% 完整的解决方案。 =p

Answer 5

我会说你应该利用两件事

1. 使用data- 属性和jQuery 的.data 方法
2. 一个通用类，用于标识您希望具有此行为的所有图像

那么你所有这些项目的代码变成：

$(".image").mouseout(function() {
        $(".default").show();
        $(".cat" + $(this).data('id')).hide();
        }).mouseover(function() {
            $(".default").hide();
            $(".cat" + $(this).data('id')).show();
           });

现场示例：http://jsfiddle.net/sW8mZ/

Answer 6

这是我的代码。 http://jsfiddle.net/QVS9X/47/

例子：

$(document).ready(function() {
$('.image').hover(
    function(){
        $('.default p').html($(this).children('p').html());
    }, 
    function(){$('.default p').html('Default Text')}); 
});

去掉所有的cat div，有1个带有默认文本的div，然后只更新这个文本。

Answer 7

类似的东西 http://jsfiddle.net/QVS9X/51/

$(document).ready(function() {

    var defaultCat = $(".default");
    var cat1 = $(".cat1");
    var cat2 = $(".cat2");
    var cat3 = $(".cat3");

    $(".image").mouseout(function() {
        cat1.hide();
        cat2.hide();
        cat3.hide();
        defaultCat.show();
    });

    $(".i1").mouseover(function() {
        cat1.show();
        defaultCat.hide();
    });
    $(".i2").mouseover(function() {
        cat2.show();
        defaultCat.hide();
    });
    $(".i3").mouseover(function() {
        cat3.show();
        defaultCat.hide();
    });
});

Answer 8

类似的东西应该可以工作：

<div class="default">Content</div>
<img class="image" data-ref="1" />
<div class="cat" data-ref="1">Cat 1</div>
<img class="image" data-ref="2" />
<div class="cat" data-ref="2">Cat 2</div>

$('.image').hover(function() {
    $('.default, .cat[data-ref='+$(this).data('ref')+']').toggle();
});

http://jsfiddle.net/cugmj/2/

Answer 9

这是我的尝试，将类别文本移动到 div 元素使事情变得更容易一些。

http://jsfiddle.net/HV8vq/

* {
    font-size: 20px;
    text-align: center;
}
.image-cat-hover {
    float: left;
    width: 150px;
    border: thin solid #CCC;
    margin-bottom: 20px;
}
#cats, .default { 
    width: 450px;
}

<div class="image-cat-hover" data-category="Category 1 text">
  <p>Hover for cat 1</p>
</div>
<div class="image-cat-hover" data-category="Category 2 text">
  <p>Hover for cat 2</p>
</div>
<div class="image-cat-hover" data-category="Category 3 text">
  <p>Hover for cat 3</p>
</div>
<div class="default">
  <p id="placeholder">Default Text</p>
</div>

$(document).ready(function() {
    var defaultText = $(".default").text();
    $(".image-cat-hover").mouseout(function() {
        $(".default").text(defaultText);
        }).mouseover(function() {
            $(".default").text($(this).data("category"));
           });

});

编辑

我不得不说我在回答和阅读这个问题的其他答案时学到了很多东西。以下是更新后的回复：

http://jsfiddle.net/HV8vq/3/

<div>
  <p id="defaultText">Default Text</p>
  <p id="placeholder" style="display:none;"></p>
</div>

$(document).ready(function() {
    $(".image-cat-hover").hover(function() {
        $("#defaultText").toggle();
        $("#placeholder").toggle().text($(this).data("category"));
    });
});