Subscribe按钮设计，点击unSubscribe后

Question

我想设计一个订阅按钮。当用户订阅另一个用户时，该按钮应将文本更改为UnSubscribe，如: YouTube

Href=“#取消订阅”

href="#subscribe“

href="#login_required

​

.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

<a href="#unsubscribe" class="btn" type="button">Subscribe</a>
<a href="#subscribe" class="btn" type="button">UnSubscribe</a>

​

Answer 1

您需要使用jQuery/Javascript来实现这一点，检查按钮内部的文本，并根据按钮内部的文本将文本更改为subscribe & unsubscribe。像这样：

$('.btn').on('click', function() {
  if($(this).text() == 'Subscribe') {
    $(this).text('UnSubscribe');
    $(this).attr('href', '#subscribe');
  } else {
    $(this).text('Subscribe');
    $(this).attr('href', '#unsubscribe');
  }
});

看看下面的代码片段：

​

$('.btn').on('click', function() {
  if($(this).text() == 'Subscribe') {
    $(this).text('UnSubscribe');
    $(this).attr('href', '#subscribe');
  } else {
    $(this).text('Subscribe');
    $(this).attr('href', '#unsubscribe');
  }
});

.btn {
  background: #3498db;
  background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
  background-image: -moz-linear-gradient(top, #3498db, #2980b9);
  background-image: -ms-linear-gradient(top, #3498db, #2980b9);
  background-image: -o-linear-gradient(top, #3498db, #2980b9);
  background-image: linear-gradient(to bottom, #3498db, #2980b9);
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#unsubscribe" class="btn" type="button">Subscribe</a>
<a href="#subscribe" class="btn" type="button">UnSubscribe</a>

​

希望这能有所帮助！