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>