Question

我有一个非常不合逻辑的jQuery代码，我想看看是否有人找到了更好的方法来做同样的事情：

jQuery的：

$(".col-md-3 img").hover(function() {
    $(this).parent().children(".search").show();
    $(this).parent().children(".photo").css("opacity","0.4");
}, function(){
    $(this).parent().children(".search").hide();
    $(this).parent().children(".photo").css("opacity","1");
});

对应此代码的HTLM：

<div class="col-md-3">
    <img class="photo" src="img/1_small.jpg" alt="img" />
    <img class="search hidden-xs" src="img/search.png" width="50px"/> 
</div>

我有多个类似的div。

编辑：

我不喜欢我多次访问DOM的事实：

$(this).parent().children();

我来回走动，我认为这可能是一个更好的解决方案。

兄弟姐妹的问题是一个图像在另一个图像上，位置绝对，这会导致jQuery出现一些错误。您可以在此处看到实时网站：live

Answer 1

只需使用 CSS ，0％jQuery：

.photo-wrap .search {display:none}
.photo-wrap .photo {opacity:1}

.photo-wrap:hover .search {display:inline-block}
.photo-wrap:hover .photo {opacity:.4}

<div class="col-md-3 photo-wrap">
    <img class="photo" src="img/1_small.jpg" alt="img" />
    <img class="search hidden-xs" src="img/search.png" width="50px"/> 
</div>

<强> Demo

使用 jQuery ，您可以获得.col-md-3选择器而不是.col-md-3 img：

$(".col-md-3").hover(function(){
    $(".search", this).show()
    $(".photo", this).fadeTo("fast", 0.4)
}, function(){
    $(".search", this).hide()
    $(".photo", this).fadeTo("fast", 1)            
});

Answer 2

我不确切地知道您对当前代码的看法，但您可以这样做：

var hoverer = function(show, opacity) {
 return function() {
    $(this).parent().children(".search").toggle(show);
    $(this).parent().children(".photo").css("opacity", opacity);
 };
};

$(".col-md-3 img").hover(hoverer(true, "0.4"), hoverer(false, "1"))

优化jQuery代码的逻辑

2 个答案: