Обновление атрибута данных у всех детей с помощью jQuery - PullRequest
Новая
       8

Обновление атрибута данных у всех детей с помощью jQuery

0 голосов
/ 15 декабря 2018

У меня есть задача, где я должен изменить все атрибуты data-hover в разделе .links на правильные, которые находятся в элементах <span>: 

<section class="links">
    <nav>
        <a href="#" data-hover="JavaScript"><span>Backbone</span></a>
        <a href="#" data-hover="Angular"><span>JavaScript</span></a>
        <a href="#" data-hover="Backbone"><span>Angular</span></a>
        <a href="#" data-hover="Ember"><span>Ember</span></a>
    </nav>
</section>

Я уже пытался вытянуть все data-hover значения в массив и обменять их (используя метод соединения) на новые, но после этого он не внедряется в HTML-код.Также, когда я пытаюсь изменить это только для первого элемента, он не обновляет HTML, хотя обновление переменной отображается в консоли.

Ответы [ 2 ]

0 голосов
/ 15 декабря 2018

Другой альтернативой для изменения атрибута data-hover будет использование метода JQuery: data (ключ, значение) при инициализации документа (т.е. когда документ готов).Проверьте следующий пример: 

$(document).ready(function()
{
    $(".links a").each(function()
    {
       // DEBUG: Log the original data-hover attribute.
       console.log("Original: " + $(this).data("hover"));

       // Fix data-hover attribute of each link.
       $(this).data("hover", $(this).find("span").text());
    });

    // DEBUG: After some time, log de new attributes.
    setTimeout(function()
    {
        $(".links a").each(function()
        {
            console.log("New: " + $(this).data("hover"));
        });
    },
    2000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<section class="links">
  <nav>
    <a href="#" data-hover="JavaScript">
      <span>Backbone</span>
    </a>
    <a href="#" data-hover="Angular">
      <span>JavaScript</span>
    </a>
    <a href="#" data-hover="Backbone">
      <span>Angular</span>
    </a>
    <a href="#" data-hover="Ember">
      <span>Ember</span>
    </a>
  </nav>
</section>
0 голосов
/ 15 декабря 2018

Задача довольно проста с использованием attr(attributeName, function).

$('.links a').attr('data-hover', function(){
  return $(this).text().trim();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="links">
    <nav>
        <a href="#" data-hover="JavaScript"><span>Backbone</span></a>
        <a href="#" data-hover="Angular"><span>JavaScript</span></a>
        <a href="#" data-hover="Backbone"><span>Angular</span></a>
        <a href="#" data-hover="Ember"><span>Ember</span></a>
    </nav>
  </section>
...