Question

我希望每次#rad-btn::before的内容都被减去#rad-btn，直到它最终达到零（推送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>

任何人都知道如何做到这一点？

Answer 1

在data-*使用attr()，content来引用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>

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

Answer 3

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

通过单击减去数字直到达到零

3 个答案: