点击时增加数据属性

Question

我正在尝试的操作似乎很简单，但是显然我缺少了一些东西。 我有一个简单的选择菜单。 选择国家/地区后，该值将传递到变量中，并在其前面加上一个散列以将其更改以将其修改为受尊重的id 。 使用此id我尝试将data-size增大1。唯一的问题是data-size没有任何反应。

这是FIDDLE 。

事情应该像这样流动：

1. 选择国家
2. 选择值变成id标签
3. 所述id data-size在HTML中增加1

编辑/ UPDATE

我需要在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);
});

Answer 1

尝试将touchClick更改为"click"

DOM不会被明显更改，因为它是内部存储的。

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

演示

Answer 2

尝试做

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

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

Answer 3

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

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

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

另请注意，更改不会反映在控制台中。 但是，您可以使用alert或console.log检查它们

工作演示

如果您第一次设置数据时不存在，jQuery会在内部存储数据。 如果您确实要强制执行此操作：

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

Answer 4

这对我有用：

小提琴： 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);
});