单击更改文本而不丢失原始文本 CSS

Question

我是 Jquery 和 Javascript 的新手，在单击 "like" 按钮后将其更改为 "liked" 时遇到了一些问题。

我已经设法更改了按钮的颜色和单击时的内容，但是当我添加一个 if/else 语句以将它更改为喜欢时，它会删除 span 字形图标以及css 特征。喜欢会变成喜欢，但会删除字形、边框半径、边框宽度、按钮高度等。

我查看了 Stack Overflows 上关于点击更改文本的其他帖子，但我找不到关于此类问题的任何内容。

感谢您的帮助！

$(function() {
    $('#object_heart').click( function(){
        $(this).find('span').css('color', '#8b35ee');
        $('#social_buttons').find('#object_heart').css('color', '#8b35ee');
        $('#social_buttons').find('#object_heart').css('border-color', '#8b35ee');
    });
});

.object_social {
    display: inline-block;
    position: relative;
    left: 0;
    border-color: #d0d0d0;
    border-style: solid;
    border-width: thin;
    border-radius: 5px;
    min-height: 28px;
    max-height: 28px;
    vertical-align: middle;
    color: #888888;
}
.object_social:visited {
        border-color: #d0d0d0;
        backround: none;
        outline: none;
    }
.object_social:focus {
        outline: none;
    }
.object_social:hover {
        border-color: #a2a2a2;
    }
.object_social:hover .icon-Heart {
        transition: 0.7s;
        color: #ae68ff;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="object_heart" class="object_social">
  <span class="icon-Heart"></span>
  &nbsp;Like
</button>

Answer 1

$(function() {
  $('#object_heart').click(function() {
    var $this = $(this);

    if ($this.find('span:last-of-type').html() === 'Like') {
      $this.css('color', '#8b35ee').css('border-color', '#8b35ee').find('span:first-of-type').css('color', '#8b35ee');
      $this.find('span:last-of-type').html('Liked')
    } else {
      $this.css('color', '#888888').css('border-color', '#d0d0d0').find('span:first-of-type').css('color', '#888888');
      $this.find('span:last-of-type').html('Like')
    }

  });
});

.object_social {
  display: inline-block;
  position: relative;
  left: 0;
  border-color: #d0d0d0;
  border-style: solid;
  border-width: thin;
  border-radius: 5px;
  min-height: 28px;
  max-height: 28px;
  vertical-align: middle;
  color: #888888;
}
.object_social:visited {
  border-color: #d0d0d0;
  background: none;
  outline: none;
}
.object_social:focus {
  outline: none;
}
.object_social:hover {
  border-color: #a2a2a2;
}
.object_social:hover .icon-Heart {
  transition: 0.7s;
  color: #ae68ff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="object_heart" class="object_social">
  <span class="icon-Heart"></span>
  <span>Like</span>
</button>

Answer 2

这一切都可以简化为单个class切换，其余由CSS处理：

$(function() {
  $('#object_heart').click(function() {
    $(this).toggleClass('liked');
  });
});

.object_social {
  cursor: pointer;
  display: inline-block;
  position: relative;
  left: 0;
  border-color: #d0d0d0;
  border-style: solid;
  border-width: thin;
  border-radius: 5px;
  min-height: 28px;
  max-height: 28px;
  vertical-align: middle;
  color: #888888;
}
.object_social.liked span {
  color: red;
}
.object_social .liked-text {
  display: none;
}
.object_social.liked .liked-text {
  display: inline;
}
.object_social.liked .like-text {
  display: none;
}
.object_social .icon-Heart {
  display: none;
}
.object_social.liked .icon-Heart {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="object_heart" class="object_social"> <span class="icon-Heart">x</span>
  <span class="like-text">Like</span>
  <span class="liked-text">Liked</span>
</button>

显然我没有包含您想要的所有更改，但您明白了。用一堆 jQuery 语句来操作 CSS 很麻烦而且难以维护。想象一下，例如，如果您想在整个站点范围内更改按钮的颜色。

Answer 3

看看这是否对您有帮助：

$(function() {
$('#object_heart').click( function(){

    $(this).find('span').css('color', '#8b35ee');
    $('#social_buttons').find('#object_heart').css('color', '#8b35ee');
    $('#social_buttons').find('#object_heart').css('border-color', '#8b35ee');
    if($(this).html() === "&nbsp;Like"){
        $(this).html("&nbsp;Liked");
    } else {
        $(this).html("&nbsp;Like");
    }
});
});

这是 jsFiddle：

https://jsfiddle.net/2qrvssfr/1/

单击更改文本而不丢失原始文本 CSS

Change text on click without losing original CSS

html

css

jquery

text

onclick