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，并想知道为什么事件处理程序不起作用......然后你会重新审视我的答案:)并且就像...... John真的有一个100％完整的解决方案。 = P

Answer 5

有些事情应该有效：

<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 6

我会说你应该利用两件事

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

然后，您所有这些项目的代码变为：

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

实例：http://jsfiddle.net/sW8mZ/

Answer 7

这是我的代码。 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 8

这是我的尝试，将类别文本移动到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")); }); });

Answer 9

像这样的东西 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();
    });
});

制作更智能的jQuery代码

9 个答案: