【问题标题】:How to change color when click icon in css单击css中的图标时如何更改颜色
【发布时间】:2017-05-21 10:45:28
【问题描述】:

我正面临在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>

如何点击图标并改变颜色?非常感谢!

【问题讨论】:

  • css中没有'clicked'属性而不是'after/before'吗?我用它来设计 fxmls..
  • @minigeek:是的,你是对的,我该如何解决这个问题?

标签: jquery html css ajax


【解决方案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>

【讨论】:

  • 嗨@moay:你能在正文中介绍更多代码'//'吗?
【解决方案2】:

1 小提琴链接http://jsfiddle.net/JfGVE/2029/

<span>
<button class="saveHome hoverPulse pan typeReversed">
    <span class="stackIcons">
        <i class="iconHeartActive iconOnly"></i>
<i class="iconHeartEmpty typeReversed iconOnly"></i> 
    </span>
</button>
</span> 



//CSS Code

button{
  width: 100px;
  height: 50px;
  position: relative;
}

 .iconHeartEmpty::before{
   content: "\f001";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 35%;
    left: 5%;
 }
 .iconHeartActive::after{
      content: "\f001";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: red;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 35%;
    left: 5%;
 }
 .hide{
   display: none;
 }



//Script

 $( ".saveHome" ).click(function() {
   $(".stackIcons i" ).toggleClass( "hide" );
 });

【讨论】:

  • 更新了这个小提琴的颜色要求jsfiddle.net/JfGVE/2030
  • 嗨@Krishna9960:我添加了文件:,但不对?
  • 很高兴听到这个消息 :) 编码愉快
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-04-20
  • 1970-01-01
  • 1970-01-01
  • 2023-01-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多