通过单击减去数字，直到它达到零答案

【问题标题】：Subtract number by click till it reaches zero通过单击减去数字，直到它达到零
【发布时间】：2016-11-06 16:17:38
【问题描述】：

我希望每次推送 #rad-btn 时都减去 #rad-btn::before 的内容，直到最终达到零（推送 12 次后）。

$(document).ready(function() {
  $("#rad-btn").click(function() {});
});

#rad-btn::before {
  content: "12";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="rad-btn" href="#">
  <img src="img/rad-btn2.png">
</a>

有人知道怎么做吗？

【问题讨论】：

你能发布 HTML 吗？
<a id="rad-btn" href="#"><img src="img/rad-btn2.png"></a> 就是这样

标签： javascript jquery css click subtraction

【解决方案1】：

在content 处使用data-*、attr() 来引用data-* 属性Element.dataset

$(document).ready(function() {
  $("#rad-btn").click(function(e) {
    e.preventDefault();
    if (this.dataset.btn > 0) {
      this.dataset.btn = --(this.dataset.btn)
    }
  })
})

#rad-btn::before {
  content: attr(data-btn);
}
#rad-btn {
  width: 100px;
  padding: 8px;
  border: 2px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<a id="rad-btn" href="#" data-btn="12">
  <img src="" alt="image">
</a>

【讨论】：

【解决方案2】：

您可以使用 css attr() 设置内容然后调整该属性值

$('#rad-btn').click(function(e) {
  e.preventDefault();
  $(this).attr('data-num', function(_, curr) {
    return curr - 1 > 0 ? curr - 1 : 0;
  });
});

#rad-btn::before {
  content: attr(data-num);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="rad-btn" href="#" data-num="12"></a>

【讨论】：

【解决方案3】：

如果您正在寻找其他方法，或者无法更改您可以使用的标记：

counter-reset，起始值为 12。
counter-increment 为负值，每次单击锚点时减少 1。
伪元素content属性中的counter()css函数 ::before 显示号码。

$(document).ready(function() {
  (function() {
    var x = -1;
    $("#rad-btn").on("click.mycounter", function(e) {
      e.preventDefault();
      if (x === -12) {
        $(this).off("click.mycounter");
      }
      $(this).css("counter-increment", "mycounter " + x);
      x--;
    });
  })();
});

#rad-btn {
  counter-reset: mycounter 12;
}
#rad-btn::before {
  content: counter(mycounter);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="rad-btn" href="#">
  <img src="" alt="image">
</a>

【讨论】：