Question

我是Jquery和Javascript的新手，并且在更改＆＃34;喜欢＆＃34;时遇到了一些麻烦。按钮到＆＃34;喜欢＆＃34;什么时候点击它。

我已经设法在点击时更改按钮和内容的颜色，但是当我添加if / else语句以将其更改为喜欢时，它将删除span glyphicon以及css功能。之类似会改为喜欢，但会删除glyphicon，边框半径，边框宽度，按钮高度等。

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

感谢您的帮助！

＆＃13;

$(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');
    });
});

＆＃13;

.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;
    }

＆＃13;

<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>

＆＃13;

Answer 1

＆＃13;

$(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')
    }

  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 2

看看这是否有助于您朝着正确的方向前进：

$(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/

Answer 3

这可以简化为单个类切换，其余部分由CSS处理：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

显然，我还没有包含你想要的所有变化，但你明白了。使用一堆jQuery语句操作CSS很麻烦，难以维护。想象一下，如果你想在网站范围内改变按钮的颜色，例如。

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

3 个答案: