“添加到收藏夹”按钮以更改类和innerHTML

Question

I need to make an "Add to favs" button that would toggle between "Add" and "Added" states. 我需要制作一个“添加到收藏夹”按钮，以在“添加”和“添加”状态之间切换。 The trick is that when in "Added" state, I want it to have a hover behaviour like all red and saying "Remove from favs". 诀窍是，当我处于“已添加”状态时，我希望它具有像所有红色一样的悬停行为，并说“从收藏夹中删除”。 BUT when you click the button for the 1st time and it changes to "Added", I don't want the 'remove' style turn on immediately. 但是，当您第一次单击该按钮，并且它变为“已添加”时，我不希望“删除”样式立即打开。

My solution is to create 2 classes: .isChecked and .isJustPressed . 我的解决方案是创建2个类： .isChecked和.isJustPressed 。 The first is used to determine the button actual state and the second is used to apply the "remove from favs" hover styling only after the mouseleave event. 第一个用于确定按钮的实际状态，第二个用于仅在mouseleave事件之后应用“从收藏夹中删除”悬停样式。 These classes are handled by jQuery. 这些类由jQuery处理。 I am quite new to the language, so I've come up with such working solution (see below). 我是该语言的新手，所以我想出了一个可行的解决方案（请参阅下文）。 The CSS is simplified. CSS被简化。 Well the reason I posted this is that I feel there must be a more elegant way to solve this. 好吧，我发布此文件的原因是我觉得必须有一种更优雅的方法来解决此问题。 And besides, I don't like my jQuery code, so I'd appreciate any comments there also 另外，我不喜欢我的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>

Answer 1

I'm not sure if this is what you are looking for but, I rewrote your solution with more method chaining, and abstraction: 我不确定这是否是您要寻找的，但是，我通过更多方法链接和抽象重写了您的解决方案：

HTML: HTML：

<div class="fav_btn">Add To Favs</div>

JS: 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: CSS：

.fav_btn {
    padding: 5px;
    background-color:blue;
    color: white;
}
.fav_btn:hover {
    background-color: lightblue;
}
.fav_btn.remove:hover {
    background-color: pink;
}

“添加到收藏夹”按钮以更改类和innerHTML

问题描述

1 个解决方案

解决方案1
0 2015-03-10 08:27:10

“添加到收藏夹”按钮以更改类和innerHTML

问题描述

1 个解决方案

解决方案1 0 2015-03-10 08:27:10

解决方案1
0 2015-03-10 08:27:10