单击时增加数据属性

Increasing data attribute on click

本文关键字：数据属性 增加 单击      更新时间：2023-09-26

我尝试的似乎很简单，但我显然遗漏了一些东西。我有一个简单的选择菜单。选择一个国家/地区后，将该值传递到一个变量中，并在其前面加上一个散列以更改该值—将其修改为相应的id。使用这个id，我试图将data-size增加1。唯一的问题是data-size没有发生任何变化。

这是一个FIDDLE。

事情应该是这样的：

  1. 选择国家
  2. 选择转换为id标签的值
  3. 所述CCD_ 7的CCD_

编辑/更新

我需要在HTML中更新实际的data-size值，因为我有处理不同值的特定CSS。

HTML

<select name="countryList" id="countryList" class="selectBox">
    <option value="" disabled selected>SELECT</option>
    <option value="austria">Austria</option>
    <option value="brazil">Brazil</option>
    <option value="canada">Canada</option>
</select>
<button class="cancel">cancel</button>
<button class="confirm">confirm</button>
<div class="dot" data-size="0" id="austria"></div>
<div class="dot" data-size="0" id="brazil"></div>
<div class="dot" data-size="0" id="canada"></div>

jQuery

var countryPicked = "";
$('.confirm').on(touchClick, function(){
    countryPicked = $('#countryList').val();
    countryPicked = ($('#' + countryPicked));
    var i = countryPicked.data('size');
    countryPicked.data('size', i + 1);
});

尝试将touchClick更改为"click"

DOM不会明显地更改，因为它存储在内部。

如果要更新DOM ，请使用attr('data-size',i + 1)

演示

尝试进行

countryPicked.attr('data-size', i+1);

.data（）似乎有问题，它只能读取属性，而不能设置它。

首先请将处理程序修改为：

$('.confirm').on(`click`, function(){
   //code here
});

对于多个事件，将逗号分隔的值作为事件。

还要注意，更改不会反映在控制台中。但是，您可以使用alert或console.log 进行检查

工作演示

如果第一次设置数据时数据不存在，jQuery会在内部存储这些数据。如果你真的想强迫它：

countryPicked.attr('data-size', i + 1);

这对我有效：

Fiddle：http://jsfiddle.net/GtT3Q/13/

$('.confirm').click(function(){
   var countryPicked = $('#countryList').val();
   countryPicked = $('#' + countryPicked);
   var i = parseInt(countryPicked.attr('data-size'));
   countryPicked.attr('data-size', i + 1);
});
相关文章：