jQuery添加/刪除類或切換類

Question

我只是想知道最佳做法是切換一個類，或者只是在使用jquery的mouseenter/mouseleave狀態期間添加和刪除它。兩者似乎都很好，只是不確定哪個最適合。

謝謝

$('#image1').mouseenter(function() { 
 
    $('#image1').toggleClass('transform'); 
 
    $('#image1 .images-color-overlay').toggleClass('transparent'); 
 
    $('#image1 .images-text').toggleClass('show-images-text'); 
 
    }); 
 

 
    $('#image1').mouseleave(function() { 
 
    $('#image1').toggleClass('transform show-images-text'); 
 
    $('#image1 .images-color-overlay').toggleClass('transparent'); 
 
    $('#image1 .images-text').toggleClass('show-images-text'); 
 
    });

.images-color-overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 
.images { 
 
    width: 33.333%; 
 
    float: left; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
#image1 { 
 
    background-image: url("http://placehold.it/1000x320"); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    width: 100%; 
 
    height: 100px; 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 
.images-text { 
 
    text-align: center; 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: -20px; 
 
    color: #fff; 
 
    font-size: 10px; 
 
    line-height: normal; 
 
    -webkit-transition: all 1s; 
 
    transition: all 1s; 
 
} 
 
.show-images-text { 
 
    -webkit-transition: all 1s; 
 
    transition: all 1s; 
 
    bottom: 20px; 
 
} 
 
.transform { 
 
    -webkit-transform: scale(1.25); 
 
    transform: scale(1.25); 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 
.transparent { 
 
    background-color: rgba(0, 0, 0, 0) !important; 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="images"> 
 
    <div id="image1"> 
 
    <div class="images-color-overlay"> 
 
     <p class="images-text">hidden-text</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

您的代碼在技術上是很好，但是你可以縮短它只是使用hover()方法，爲您提供的功能將被稱爲兩個mouseenter和mouseleave事件。

您也可以使用函數中的this引用來保存DOM訪問，並且還將從$(this)創建的jQuery對象緩存在一個變量中以供重用。試試這個：

$('#image1').hover(function() { 
 
    var $image = $(this).toggleClass('transform'); 
 
    $image.find('.images-color-overlay').toggleClass('transparent'); 
 
    $image.find('.images-text').toggleClass('show-images-text'); 
 
});

.images-color-overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 
.images { 
 
    width: 33.333%; 
 
    float: left; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
#image1 { 
 
    background-image: url("http://placehold.it/1000x320"); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    width: 100%; 
 
    height: 100px; 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 
.images-text { 
 
    text-align: center; 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: -20px; 
 
    color: #fff; 
 
    font-size: 10px; 
 
    line-height: normal; 
 
    -webkit-transition: all 1s; 
 
    transition: all 1s; 
 
} 
 
.show-images-text { 
 
    -webkit-transition: all 1s; 
 
    transition: all 1s; 
 
    bottom: 20px; 
 
} 
 
.transform { 
 
    -webkit-transform: scale(1.25); 
 
    transform: scale(1.25); 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 
.transparent { 
 
    background-color: rgba(0, 0, 0, 0) !important; 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="images"> 
 
    <div id="image1"> 
 
    <div class="images-color-overlay"> 
 
     <p class="images-text">hidden-text</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

的toggleClass是你的情況韌皮實踐。

在內部它也做同樣的事情，如果類存在然後刪除它，如果沒有，然後添加它。自己看，轉到github link並搜索toggleClass。

// Check each className given, space separated list 
if (self.hasClass(className)) { 
    self.removeClass(className); 
} else { 
    self.addClass(className); 
} 

Answer 3

那麼很多這種風格的問題在這裏被擊落，因爲它似乎歸結爲偏好。但是，HERE是一種不使用JavaScript，只使用CSS的方法，有些人可能會認爲它更高效。

.images-color-overlay { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 
.images { 
 
    width: 33.333%; 
 
    float: left; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
#image1 { 
 
    background-image: url("http://placehold.it/1000x320"); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    width: 100%; 
 
    height: 100px; 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 
.images-text { 
 
    text-align: center; 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: -20px; 
 
    color: #fff; 
 
    font-size: 10px; 
 
    line-height: normal; 
 
    -webkit-transition: all 1s; 
 
    transition: all 1s; 
 
} 
 

 
#image1:hover { 
 
    -webkit-transform: scale(1.25); 
 
    transform: scale(1.25); 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 

 
#image1:hover .images-text { 
 
    -webkit-transition: all 1s; 
 
    transition: all 1s; 
 
    bottom: 20px; 
 
} 
 

 
.images-color-overlay:hover { 
 
    background-color: rgba(0, 0, 0, 0) !important; 
 
    -webkit-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="images"> 
 
    <div id="image1"> 
 
    <div class="images-color-overlay"> 
 
     <p class="images-text">hidden-text</p> 
 
    </div> 
 
    </div> 
 
</div>