如何簡化Redudant代碼jquery hover（）

Question

我想實現jquery hover（）並且我的代碼運行良好。爲了使用jqueury hover（）運行addClass（）和removeClass（），我必須定義如下面代碼所示的選擇器。但是它的浪費會導致兩次聲明選擇器，我怎麼能簡化這個冗餘代碼來聲明選擇器一次。

$('.main ul li a, .content-wrap .content').hover(
 
    function() { 
 
    //start redudant code 
 
    var mainAnchor = $(this).data('hover'); 
 
    var mainData = $('.main li a[data-hover= ' + mainAnchor + ']'); 
 
    var contentData = $('.content-wrap .content[data-hover= ' + mainAnchor + ']'); 
 
    //end redudant code 
 
    mainData.addClass('active'); 
 
    contentData.addClass('active'); 
 
    contentData.siblings().addClass('hidden'); 
 
    $(this).addClass('active'); 
 
    }, 
 
    function() { 
 
    //start redudant code 
 
    var mainAnchor = $(this).data('hover'); 
 
    var mainData = $('.main li a[data-hover= ' + mainAnchor + ']'); 
 
    var contentData = $('.content-wrap .content[data-hover= ' + mainAnchor + ']'); 
 
    //end redudant code 
 
    mainData.removeClass('active'); 
 
    contentData.removeClass('active'); 
 
    contentData.siblings().removeClass('hidden'); 
 
    $(this).removeClass('active'); 
 
    });

.content-wrap { 
 
    margin-top: 30px; 
 
    padding-bottom: 60px; 
 
    background-color: yellow; 
 
    clear: both; 
 
    overflow: hidden; 
 
    /*position: relative;*/ 
 
} 
 

 
.content { 
 
    padding: 80px; 
 
    float: left; 
 
    margin-right: 10px; 
 
    cursor: pointer; 
 
    transition: 0.2s ease-in; 
 
    position: relative; 
 
} 
 

 
.tool-tip { 
 
    position: absolute; 
 
    bottom: -20px; 
 
    left: 0; 
 
    background-color: white; 
 
    opacity: 0; 
 
    transition: 0.1s ease-in; 
 
} 
 

 
.content.active .tool-tip { 
 
    opacity: 1; 
 
} 
 

 
.main li a.active { 
 
    background-color: red; 
 
    color: white; 
 
} 
 

 
.content.active { 
 
    border: 2px solid red; 
 
} 
 

 
.hidden { 
 
    opacity: 0.7; 
 
} 
 

 
.content.hidden { 
 
    background-color: gray; 
 
} 
 

 
.red { 
 
    background-color: red; 
 
} 
 

 
.green { 
 
    background-color: green; 
 
} 
 

 
.blue { 
 
    background-color: blue; 
 
} 
 

 
.purple { 
 
    background-color: purple; 
 
} 
 

 
.brown { 
 
    background-color: brown; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="main"> 
 
    <ul> 
 
    <li><a href="" data-hover="item1">item 1</a></li> 
 
    <li><a href="" data-hover="item2">item 2</a></li> 
 
    <li><a href="" data-hover="item3">item 3</a></li> 
 
    <li><a href="" data-hover="item4">item 4</a></li> 
 
    <li><a href="" data-hover="item5">item 5</a></li> 
 
    </ul> 
 
</div> 
 

 
<div class="content-wrap"> 
 
    <div class="content red" data-hover="item1"> 
 
    <p>content 1</p> 
 
    <div class="tool-tip"> 
 
     content 1 is active 
 
    </div> 
 
    </div> 
 
    <div class="content green" data-hover="item2"> 
 
    <p>content 2</p> 
 
    <div class="tool-tip"> 
 
     content 2 is active 
 
    </div> 
 
    </div> 
 
    <div class="content blue" data-hover="item3"> 
 
    <p>content 3</p> 
 
    <div class="tool-tip"> 
 
     content 3 is active 
 
    </div> 
 
    </div> 
 
    <div class="content purple" data-hover="item4"> 
 
    <p>content 4</p> 
 
    <div class="tool-tip"> 
 
     content 4 is active 
 
    </div> 
 
    </div> 
 
    <div class="content brown" data-hover="item5"> 
 
    <p>content 5</p> 
 
    <div class="tool-tip"> 
 
     content 5 is active 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

可以使用的hover()只有一個函數參數，它將會觸發兩個鼠標移開和的mouseenter做到這一點。

然後在大多數情況下使用toggleClass()，並檢查事件type作爲任何具體的不通用的條件。

$('.main ul li a, .content-wrap .content').hover(function(e) { 
    //start redudant code 
    var mainAnchor = $(this).data('hover'); 
    var mainData = $('.main li a[data-hover= ' + mainAnchor + ']'); 
    var contentData = $('.content-wrap .content[data-hover= ' + mainAnchor + ']'); 

    //don't seem to be dependent on which event 
    mainData.toggleClass('active'); 
    mainData.toggleClass('active'); 
    contentData.toggleClass('active'); 
    contentData.siblings().toggleClass('hidden'); 
    $(this).toggleClass('active'); 

    // use this for anything more specifc 
    var eventType = e.type; 
    if (eventType === 'mouseout') { 
    // anything specific to mouseout 
    } else { 
    // anything specific to mouseenter 
    } 

}) 

Answer 2

移動你的代碼，以不同的功能

$('.main ul li a, .content-wrap .content').hover(
    function() { 
    doHover.apply(this, true); 
    }, 
    function() { 
    doHover.apply(this, false); 
    } 
); 

function doHover(isHover) { 
    var mainAnchor = $(this).data('hover'); 
    var mainData = $('.main li a[data-hover= ' + mainAnchor + ']'); 
    var contentData = $('.content-wrap .content[data-hover= ' + mainAnchor + ']'); 
    mainData.toggleClass('active', isHover); 
    contentData.toggleClass('active', isHover); 
    contentData.siblings().toggleClass('hidden', isHover); 
    $(this).toggleClass('active', isHover); 
}