Question

我有一个按钮元素，我想用作“添加到行李”按钮，但是一旦按钮被用户点击，我想更改几种状态的文本。按钮初始状态将显示“Add to Bag”然后在用户点击按钮后按钮应该变为微调器图像然后在该状态的1秒动画之后，下一个状态将显示“添加到包！”最后它会回到原来的“Add to Bag”状态。

我可以在这里找到我想要实现的实例 https://milkmakeup.com/products/matcha-cleanser/

我添加了部分代码，它创建了除旋转器状态之外的所有内容

// Cart button text change
(function() {
  $(".btn-cart").on("click", function() {
    var $this = $(this),
      oldText = $this.text();

    $this.text("Added to Bag!");
    $this.attr("disabled", "disabled");

    setTimeout(function() {
      $this.text(oldText);
      $this.removeAttr("disabled");
    }, 1600);
  });
})();

Answer 1

通过在标记中提供原始文本，然后在超时之前和之后更改文本，您可以非常顺利地实现这一目标

<button class="btn-cart">Add to bag</button>

$(".btn-cart").on("click", function(){
    var $this = $(this);
    $this.text("Adding to bag");

    setTimeout(function(){
        $this.setText("Added to bag!");   
    }, 1000);
});

修改以回应评论

我有点需要它来显示一个微调器而不是说添加到包

如果你稍微改变你的标记，这也应该很容易

<button class="btn-cart">
    <span class="btn-cart--text">Add to cart</span>
    <span class="btn-cart--loading" style="display: none">
        <img src="spinner.gif" />
    </span>
</button>

$(".btn-cart").on("click", function(){
    var $this = $(this);
    $text = $(".btn-cart--text", $this);
    $loading = $(".btn-cart--loading", $this);

    // Hide text and show loading spinner
    $text.css("display", "none");
    $loading.css("display", "block");        

    setTimeout(function(){
        // Change text, show text, hide spinner
        $text.setText("Added to bag!");   
        $text.css("display: block");
        $loading.css("display", "none");
    }, 1000);
});

Answer 2

尝试下面的样本

＆＃13;

$( document ).ready(function() {
// Cart button text change
  $(".btn-cart").on("click", function() {
    var $this = $(this),
      oldText = $this.text(); 
 $this.html("<img width='50' height='50' src='http://www.bebestore.com.br/images/shared/lazyloader.gif'/>"); 
    setTimeout(function() {
      $this.text("Added to Bag!");
    }, 3000);
    setTimeout(function() {
      $("img").hide();
      $this.show();    
      $this.text(oldText);
    }, 5000);
  });
});

＆＃13;

button,div{text-transform:uppercase;background: #828282;
    border: #828282 1px solid;
    color: #fff;    transition: opacity 0.2s;    border-radius: 0;
    cursor: pointer;
    font-family: "Calibre SemiBold", arial, sans-serif;
    font-size: 12px;
    height: 45px;
    letter-spacing: 1.5px;
    line-height: 45px;
    overflow: hidden;
    padding: 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 170px;
    -webkit-appearance: none;}
/*div {
    border: 7px solid #f3f3f3; 
    border-top: 7px solid #3498db; 
    border-radius: 50%;
    width: 20px;
    height: 20px;
    
}*/
span {
    background: url(https://www.storefirst.com/static/common/images/loading-spinner.svg);
    height: 30px;
    display: inline-block;
    width: 30px;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-cart">Add to bag</button>

＆＃13;

Answer 3

要实现您的要求，您可以通过更改文本并附加加载微调器图像来更新单击按钮。然后，您可以使用几个计时器在此之后按顺序更改文本。像这样：

＆＃13;

import winsound
import sys

winsound.PlaySound(Test.wav,winsound.SND_ASYNC)

＆＃13;

$('.btn-cart').click(function() {
  var $btn = $(this).prop('disabled', true).addClass('adding').html('<img src="https://i.imgur.com/01yMDgZ.gif" />Adding to bag...');

  setTimeout(function() {
    $btn.text('Added to bag!').toggleClass('adding added');
    setTimeout(function() {
      $btn.text('Add to bag').removeClass('added').prop('disabled', false);
    }, 1000)
  }, 1000);
})

＆＃13;

.btn-cart {
  background-color: #C00;
  border: 0;
  border-radius: 10px;
  color: #FFF;
  padding: 10px;
  font-size: 1em;
  cursor: pointer;
  outline: 0;
}

.btn-cart.adding {
  padding-left: 35px;
  background-color: #CCC;
}
.btn-cart.added {
  background-color: #CCC;
}

.btn-cart img {
  height: 25px;
  position: absolute;
  top: 15px;
  left: 15px;
}

＆＃13;

添加，添加添加到Bag onclick按钮状态

3 个答案: