jquery - изменить значение и перечитать обратно во вторую функцию

Question

Как я могу обновить значение с помощью jquery, а затем повторно прочитать это значение в другой функции.

Пример: у меня есть две кнопки:

<span id="btn1" data-cust="1">BUTTON 1</span>
</br></br>
<span id="btn2">BUTTON2</span>

Я тогда есть две jquery функции:

btn1=function()
{
    $('body').on('click','#btn1',function()
    {
        dc=$('#btn1').data('cust'); //get the value of btn1
        alert(dc);                  //Report the value of btn1
        $('#btn1').attr('data-cust',0);  //Change the value of btn1 to 0
    })
}

btn2=function()
{
    $('body').on('click','#btn2',function()
    {
        dc2=$('#btn1').data('cust'); //get the current value of btn1
        alert(dc2);                  //report the current value of btn1
    })
}

Как видите, когда я нажимаю BTN1, он меняет атрибут данных #btn1 на 0.

Затем я нажимаю BTN2, ищу новое значение 0, но вместо этого я получаю старое значение 1.

Я пробовал использовать $('#btn1').data('cust',0), но это не меняет атрибут и не меняет второй функция.

Есть ли способ сделать это?

Answer 1

Вы должны быть последовательны в использовании .data() против .attr('data', ...). Это связано с тем, что, хотя .data() может читать как из внутреннего хранилища данных jQuery, , так и атрибут HTML5 data-, метод .attr('data', ...) может только читать и записывать в HTML5 Атрибут data-.

Не беспокойтесь о том, что атрибут HTML5 data- не обновляется: потому что .data() не обновляет его. Однако будьте уверены, что он правильно хранится в ссылке на объект. Если вы хотите полностью зависеть от внутреннего хранилища данных jQuery, используйте .data() во всем коде:

$('body').on('click', '#btn1', function() {
  dc = $('#btn1').data('cust'); //get the value of btn1
  console.log(dc); //Report the value of btn1
  $('#btn1').data('cust', 0); //Change the value of btn1 to 0
})

$('body').on('click', '#btn2', function() {
  dc2 = $('#btn1').data('cust'); //get the current value of btn1
  console.log(dc2); //report the current value of btn1
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="btn1" data-cust="1">BUTTON 1</span>
<br /><br />
<span id="btn2">BUTTON2</span>

Однако, если важно, чтобы атрибут data-cust обновлялся в DOM (возможно, потому, что другие плагины или часть вашего кода полагаются на чтение HTML5 атрибут данных, используйте вместо него .attr('data', ...):

$('body').on('click', '#btn1', function() {
  dc = $('#btn1').attr('data-cust'); //get the value of btn1
  console.log(dc); //Report the value of btn1
  $('#btn1').attr('data-cust', 0); //Change the value of btn1 to 0
})

$('body').on('click', '#btn2', function() {
  dc2 = $('#btn1').attr('data-cust'); //get the current value of btn1
  console.log(dc2); //report the current value of btn1
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="btn1" data-cust="1">BUTTON 1</span>
<br /><br />
<span id="btn2">BUTTON2</span>