Question

我需要什么

我需要在点击后使用toggleclass切换图片。

css代码

 .favourate{ display:block; background:url('/images/star1.png') no-repeat; width:24px; height:25px; float:right;}
  .favourate.faved, .favourate:active{ background:url('/images/star1_hover.png') no-repeat; transition:.2s ease all;}

javascript代码：

 $(document).ready(function(){
var eventData = {};
if (localStorage.getItem('eventData') !== null) {
    $.each(eventData = JSON.parse(localStorage.getItem('eventData')), function(id){
        $('#'+id).addClass('faved');
    });
}
$('.favourate_dextop').click(function(e){
    e.preventDefault();
    if (eventData[this.id] !== undefined) {
        delete eventData[this.id];
    }else{
        eventData[this.id] = $(this).data();
    }
    $(this).toggleClass('faved');
    localStorage.setItem('eventData', JSON.stringify(eventData));
    console.log(eventData);
});  
     });

我尝试了什么

我试过在css＆amp;中删除悬停然后切换班级工作正常。 jsfiddle：http://jsfiddle.net/xxuhL555/
这里是jsfiddle，当我没有在css中移除时悬停：http://jsfiddle.net/o61rqj95/
我怎么能通过css或jquery来处理这个问题。
是toggleclass或css的问题。

调试

点击图片更改。
然后重新点击红星注意（图片会“更改”）。
关于删除悬停它的工作原理并非我的要求。

输出

它应该像切换图像而不删除图像中的悬停。

Answer 1

在Chrome中，Fiddles会在localStorage代码上抛出错误，从而阻止点击处理程序进行注册。点击事件代码本身可以正常工作。

切换类不能在jquery中悬停工作

1 个答案: