Изменить Назначить идентификатор Значение элемента атрибуту данных другого элемента

Question

У меня есть несколько элементов HTML-ссылки, которые имеют уникальный идентификатор номера.

Все они хранятся в оболочке, которая использует атрибут data, называемый «data-color».

Когда пользователь нажимает на ссылки, я хочу, чтобы цвет данных принимал идентификатор номера ссылки.

Я думал, что могу использовать данные(), но он не работает.

Адрес JSFIDDLE.

Вот мой HTML:

<div id="wrapper" data-color="01"> 

<span>Color Box</span> 

<a class="ThumbnailBox" href="#" id="02">02</a> 
<a class="ThumbnailBox" href="#" id="03">03</a> 
<a class="ThumbnailBox" href="#" id="04">04</a> 
<a class="ThumbnailBox" href="#" id="05">05</a> 
<a class="ThumbnailBox" href="#" id="06">06</a> 

</div> 

Вот мой Jquery:

(function ($) { 
    $(document).ready(function() { 

     $(".ThumbnailBox").click(function() { 
      selectedcolor = $(this).attr('id'); 
      $('#wrapper').data('datacolor', selectedcolor); 

     }); 
    }); 

})(jQuery); 

Answer 1

попробовать что-то вроде этого, вы не должны использовать данных- использовать его

$(".ThumbnailBox").click(function() { 
    $('#wrapper').data('color', this.id); 
}); 

изменить значение в dom, чем использовать attr

$('#wrapper').attr('data-color', this.id); 

The DATA- атрибуты не втягивается в первый раз свойства и доступ к данным, то больше не доступен или мутантным (значения всех данные затем сохраняются внутри JQuery)

Answer 2

вы просто попробуйте это код он работает нормально ..

$(".ThumbnailBox").click(function() { 
selectedcolor = $(this).attr('id'); 
    alert(selectedcolor) 
$('#wrapper').attr('data-color', selectedcolor); 
}); 

здесь обновляется скрипку http://jsfiddle.net/dLQHs/3/