Question

我尝试的似乎很简单，但我显然遗漏了一些东西。我有一个简单的选择菜单。选择国家/地区后，该值将传递到变量中，并附加一个哈希值以进行更改，并将其修改为受尊重的id。使用此id我尝试将data-size增加1.唯一的问题是data-size没有任何反应。

这是 FIDDLE 。

事情应该像这样：

选择国家/地区
选择的值变为id标记

data-size

id在HTML

修改/更新

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

Demo

Answer 2

尝试

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

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

Answer 3

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

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

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

另请注意，更改不会反映在控制台中。不过，您可以使用alert或console.log

进行检查

<强> Working Demo

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

单击时增加数据属性

4 个答案: