Как пользоваться атрибутом data?

Question

[mt_max]

Здравствуйте, подскажите, хочу чтобы в дивах менялись изображения, и путь к картинке хранить в атрибуте data. Пытаюсь делать так:

<div id="f4" class="thumbnails-container" style="max-height: 350px; user-select: text;">
<div id="ap4_id6" class="instance-thumbnail" data-clastering="url(static/user/four-chamber-clastering/6.jpg)" 
style="width: 100px; height: 100px; background-image: url(static/user/four-chamber/6.jpg); 
user-select: text;"><span class="instance-no">6</span></div></div>

var divs = document.querySelectorAll(".thumbnails-container > div");
	  var cont = document.getElementById("container-1-1");
	  var cont2 = document.getElementById("container-2-1");
	  for(var i = 0 ; i<divs.length; i++){
	  divs[i].onclick = function(){
      cont.style.backgroundImage = this.style.backgroundImage;
      cont2.style.backgroundImage =this.data('clastering');
	  }

	  }

В итоге в блоке cont картинка меняется, а в блоке cont2 не меняется, помогите починить пожалуйста

Answer 1

[Ernest Faizullin]

подсказка:

var divs = document.querySelectorAll(".thumbnails-container > div");

var cont = document.getElementById("container-1-1");
var cont2 = document.getElementById("container-2-1");

for (var i = 0 ; i < divs.length; i++) {

    divs[i].addEventListener('click', function(event) {
        var target = event.target;

        cont.style.backgroundImage = target.style.backgroundImage;
        cont2.style.backgroundImage = target.dataset.clastering;
    });

}