Click on增加數據屬性

我在嘗試的似乎很簡單，但我明顯錯過了一些東西。我有一個簡單的選擇菜單。選擇一個國家後，該值被傳遞到一個變量中，前面加上一個散列值以將其修改爲受尊敬的id。使用此id我試圖增加data-size 1.唯一的問題是沒有發生什麼與data-size。Click on增加數據屬性

這是FIDDLE。

事情應該流是這樣的：

選擇國家
選擇值變成id標籤
data-size說id在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); 
});

來源

2014-04-15 itsclarke

是否函數被調用？數據屬性是否被讀取？ – epascarello

嘗試改變touchClick到"click"

的DOM將不會改變明顯，因爲它是內部存儲。

使用attr('data-size',i + 1)，如果你想在DOM被更新

Demo

來源

2014-04-15 14:27:19

也許你可以解釋爲什麼DOM不會改變？ – Kapi

@卡皮，是的，我解釋了它。謝謝BTW –

我不得不使用touchClick，因爲它是一個爲觸摸屏而構建的web應用程序。 – itsclarke

嘗試做

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

似乎是壞了。數據（），它只能讀取財產，而不是設置它。

來源

2014-04-15 14:26:19 Slugge

首先請修改處理程序：

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

對於多個事件，給逗號分隔值作爲事件。

另請注意，更改不會反映在控制檯中。然而，你可以使用alert或console.log

Working Demo

jQuery的商店檢查它們的內部數據，如果他們不存在，你第一次設置它們。如果你真的想迫使它：

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

來源

2014-04-15 14:32:20

這個工作對我來說：

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

來源

2014-04-15 14:44:00 Basti

Click on增加數據屬性

回答

相關問題