jquery - 如何在css中单击图标时更改颜色

Question

我遇到了在css和jquery中点击心型图标时变色的问题

CSS:

还没有点击图标时

.iconHeartInactive::before {
   content: '\e841';
   color: rgba(71,78,82,.4);
 }

点击图标时:

.iconHeartActive::after{
    content: '\e845';
    color: #ed1b77;
 }

HTML:

<span>
<button class="saveHome hoverPulse pan typeReversed">
    <span class="stackIcons">
        <i class="iconHeartActive iconOnly"></i>
        <i class="iconHeartEmpty typeReversed iconOnly"></i>
    </span>
</button>
</span> 
<script>
   $( "iconHeartInactive" ).click(function() {
   $( this ).toggleClass( "iconHeartActive" );
 });
 </script>

我怎样才能点击图标并改变颜色？非常感谢!

Answer 1

首先:将您的 JS 代码放入准备好的包装器中:

$(document).ready(function(){
  //your code here
});

第二:我们使用 toggleClass 来设置和取消设置对象上的类，因此您有 2 个选项。 1- 更改您的 CSS，因此在默认情况下它会获得您的非事件样式，当单击它时它会获得事件样式。 2- 更改 js 以检查它是否具有事件类，因此根据您决定是否设置其中一个类的声明。

因为您似乎不想更改样式:

<span>
<button class="saveHome hoverPulse pan typeReversed">
    <span class="stackIcons">
        <i class="iconHeartActive chosenHeartIcon iconOnly"></i>
        <i class="iconHeartEmpty typeReversed iconOnly"></i>
    </span>
</button>
</span> 
<script>
    $(document).ready(function(){
       $( ".chosenHeartIcon" ).click(function() {
        if($(this).hasClass('iconHeartActive')) {
            $( this ).removeClass( "iconHeartActive" );
            $( this ).addClass( "iconHeartInactive" );
        } else {
            $( this ).removeClass( "iconHeartInactive" );
            $( this ).addClass( "iconHeartActive" );
        }

     });
 });
 </script>