我需要制作一个“添加到收藏夹”按钮，以在“添加”和“已添加”状态之间切换。诀窍是，当处于“已添加”状态时，我希望它有一个像全红一样的悬停行为，并说“从收藏夹中删除”。但是，当您第一次单击该按钮并将其更改为“已添加”时，我不希望立即打开“删除”样式。
我的解决方案是创建 2 个类:.isChecked 和 .isJustPressed。第一个用于确定按钮的实际状态，第二个用于仅在 mouseleave 事件之后应用“从收藏中删除”悬停样式。
这些类由 jQuery 处理。我对这种语言很陌生，所以我想出了这样的工作解决方案(见下文)。 CSS 被简化了。那么我发布这个的原因是我觉得必须有一种更优雅的方法来解决这个问题。此外，我不喜欢我的 jQuery 代码，所以我也很感激那里的任何评论
$('.fav_btn').click(function(event) {
$(this).addClass('isJustPressed');
$(this).toggleClass('isChecked');
$(this).html(function() {
return $('.fav_btn').hasClass('isChecked') ? 'Added' : 'Add to favourites';
});
});
$('.fav_btn').on('mouseleave', function(event) {
if ( $(this).hasClass('isChecked')){
$('.fav_btn').removeClass('isJustPressed');
}
});
$('.fav_btn').hover(
function() {
if ($('.fav_btn').hasClass('isChecked') && !$('.fav_btn').hasClass('isJustPressed')){
$('.fav_btn').html('Remove from favourites');
}},
function(){
if ($('.fav_btn').hasClass('isChecked') && !$('.fav_btn').hasClass('isJustPressed')){
$('.fav_btn').html('Added');
}});.fav_btn {
position: relative;
box-sizing: border-box;
width: 100px;
height: 100px;
border: 1px solid black;
background-color: lightblue;
}
.fav_btn:hover{
background-color: blue;
color: #fff;
}
.fav_btn.fav_btn.isChecked.isJustPressed:hover{
background-color: blue;
color: #fff;
}
.fav_btn.isChecked {
background-color: #fff;
}
.fav_btn.isChecked:hover{
background: pink;
color: black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="fav_btn">Add to fav</div>
</body>最佳答案
我不确定这是否是您要找的，但是我用更多的方法链和抽象重写了您的解决方案:
HTML:
<div class="fav_btn">Add To Favs</div>
JS:
//Moved btn text into variable so it can be changed more easily
var btn_text = {
default: "Add To Favs",
added: "Selection Added",
remove: "Remove Selection"
}
$('.fav_btn')
//set initial text and classes
.removeClass('remove added')
.html(btn_text.default)
//The click toggles the 'default' and 'added' states
.on('click', function(e) {
//Toogle the 'added' class
$(this).toggleClass('added');
//Swap the text
if ($(this).is('.added')) {
$(this).html(btn_text.added);
} else {
$(this)
.removeClass('remove added')
.html(btn_text.default)
}
})
.on('mouseover', function(){
//If it has the 'added' class...add the 'remove' text
if ($(this).is('.added')) {
$(this)
.addClass('remove')
.html(btn_text.remove)
.on('mouseout', function() {
//Get rid of the 'remove' class
$(this).removeClass('remove');
//Swap out the 'remove' text
if ($(this).is('.added')) {
$(this).html(btn_text.added);
} else {
$(this).html(btn_text.default);
}
});
}
});
CSS:
.fav_btn {
padding: 5px;
background-color:blue;
color: white;
}
.fav_btn:hover {
background-color: lightblue;
}
.fav_btn.remove:hover {
background-color: pink;
}
关于javascript - "Add to favourites"更改类和 innerHTML 的按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28958902/