主页 / 问题 / 1031265
Accepted
De.Minov
Asked:2020-10-05 02:33:01 +0800 CST2020-10-05 02:33:01 +0800 CST

不重新计算价值

  • 772

有以下代码：

$(document).on('click', '.test', function(){
  let i = $(this).data('id'); // получаем значение атрибута
  i++; // значение + 1
  $(this).text(i).attr('data-id', i); // записываем новое значение в атрибут
});
.test {
  display: flex;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  background: #ccc;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class="test" data-id="0">0</div>

我无法理解一件事，为什么它只计算一次以及如何治愈它？

jquery

1 个回答

  1. Best Answer

    jQuery 不会“监视”属性更改，因此$(el).data(key)属性更改后不会更改

    jQuery在第一次函数调用后将值保存在自己内部data，如果需要更改值，则需要data带参数调用函数value，$(el).data(key, value)但同时DOM中的属性不会改变（如果需要，它可以用$(el).attr(key, value))

    示例$(el).data(key, value)：

    $(document).on('click', '.test', function(){
  let i = $(this).data('id'); // получаем значение атрибута
  i++; // значение + 1
  $(this).text(i).data('id', i); // записываем новое значение в атрибут
});
    .test {
  display: flex;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  background: #ccc;
  cursor: pointer;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class="test" data-id="0">0</div>

    您可以使用属性，而无需 JQ 数据

    没有 JQ 数据的示例：

    $(document).on('click', '.test[data-id]', function(){
  let i = $(this).attr('data-id'); // получаем значение атрибута
  i++; // значение + 1
  $(this).text(i).attr('data-id', i); // записываем новое значение в атрибут
});
    .test {
  display: flex;
  width: 50px;
  height: 50px;
  justify-content: center;
  align-items: center;
  background: #ccc;
  cursor: pointer;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<div class="test" data-id="0">0</div>

    • 2

相关问题