Question

我需要制作一个＆＃34;添加到收藏夹＆＃34;可以在＆＃34;添加＆＃34;之间切换的按钮和＆＃34;添加＆＃34;状态。诀窍在于＆＃34;添加＆＃34;状态，我希望它具有像所有红色一样的悬停行为并且说＆＃34;从favs＆＃34;中删除。但是当您第一次点击该按钮并且它变为＆＃34;添加＆＃34;时，我不想要删除＆＃39;风格立刻开启。

我的解决方案是创建两个类：.isChecked和.isJustPressed。第一个用于确定按钮的实际状态，第二个用于应用＆＃34;从favs＆＃34;中删除。仅在 mouseleave 事件之后悬停样式。这些类由jQuery处理。我对这门语言很陌生，所以我提出了这样的工作解决方案（见下文）。 CSS简化了。我发布这个的原因是我觉得必须有一个更优雅的方法来解决这个问题。此外，我不喜欢我的jQuery代码，所以我也很感激那里的任何评论

＆＃13;

$('.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');
            }});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

我不确定这是否是您正在寻找的东西但是，我用更多的方法链接和抽象重写了您的解决方案：

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;
}

＆＃34;添加到收藏夹＆＃34;用于更改类和innerHTML的按钮

1 个答案: