Как присвоить элементу класс, равный его data-атрибуту (jQuery)?

242

03 мая 2018, 08:30

Немного погуглив, написал небольшую функцию, которая присваивает элементу новый класс, равный его data-атрибуту. В данном случае реализовал присвоение классу дочернему элементу, при клике на его родителя.

Функция работает, проблем нет, но хочется увидеть, как эту функцию написали-бы люди с опытом...

Грубо говоря, как-бы Вы написали данную функцию?

$(function () { 
    $('.dropdown').click(function () { 
        var dropdown_list = $('.dropdown_list'); 
        dropdown_list.addClass(dropdown_list.attr('data-test')); 
    }) 
});

<div class="dropdown"> 
  dropdown 
  <div class="dropdown_list" data-test="test123">dropdown_list</div> 
</div>

Answer 1

.find для быстродействия (чтобы искать не по всему DOM, а только по элементу события) и .toggleClass, чтобы не дублировать класс после повторных кликов

var dropdown_list = $(this).find('.dropdown_list');
dropdown_list.toggleClass(dropdown_list.attr('data-test'))

Answer 2

На опытного не претендую, но написал бы так.

$(function () { 
    $('.dropdown').click(function () { 
       $(this).find('.dropdown_list').each(function(){ 
        $(this).addClass($(this).data('test')); 
       }); 
    }) 
});

.test123{ 
  color:red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="dropdown"> 
  <span>dropdown</span> 
  <div class="dropdown_list" data-test="test123">dropdown_list</div> 
</div>