Question

http://www.lesha.wemakesites.ru/有一个模型。一旦专注于加号图标，它就会被一个按钮取代＆＃34;跟着我＆＃34;。我想要做的是将此按钮更改为红色的按钮，说明＆＃34;取消关注＆＃34;一旦点击它。如果有人知道如何将其反转，那么这是超级的，以便当一个＆＃34;取消关注＆＃34;单击按钮，它变为＆＃34;关注＆＃34;之一。

Answer 1

我建议使用两个版本的按钮，你可以使用

display: none;

表示当前未使用的那个。

如果用户在以下两者之间切换，您可以将状态存储在变量中。

let following = true;
let btn =  document.getElementById("btn");

if (!!following) { 
  btn.style.dispaly = "none";
  following = false;
} else {
  btn.style.display = "block";
  following = false; 
}

Answer 2

在项目中拉入jquery。单靠css无法实现这一点。

$('#btn').on('click', function() {
  if (!$(this).hasClass("followed")) {
    $(this).addClass("followed btn-red");
    $(this).removeClass("btn-blue");
    $(this).html("Followed");
  } else {
    $(this).addClass("btn-blue");
    $(this).removeClass("followed btn-red");
    $(this).html("Follow");
  }
});

#btn {
  border: none;
  outline: none;
  padding: 10px 12px;
  color: #fff;
}

.btn-blue {
  background-color: blue;
}

.btn-red {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn" class="btn-blue">Follow</button>

让JS尽可能简单易懂。

单击时更改按钮的内容和颜色。

2 个答案: