数据属性只返回第一个值

Question

我试图让我的页面正文在悬停在某些列表项上时改变颜色。每个列表项都有自己的颜色存储在数据属性中，我可以在 chrome 检查器中看到它。代码正在执行我想要的操作，但是当我希望正文成为每个列表项的颜色时，只为每个项目返回列表中的第一个颜色。

HTML:

 <ul class="menu">
    <?php foreach($page->children() as $subpage): ?>
      <li id="tesq" data-color="<?= $subpage->color() ?>">
        <a href="<?= $subpage->url() ?>">
          <?= html($subpage->title()) ?></a>
      </li>
    <?php endforeach ?>
  </ul>

jQuery:

  $(function() {
    $('li').hover(function() {
        $("body").css('backgroundColor', function () {
          return $("#tesq").data('color')
        });
    }, function() {
        $("body").css('backgroundColor', 'lightgrey')
    });
  })

非常感谢任何帮助

Answer 1

在您当前的代码中，您试图从整个集合中获取数据属性，因此它将 return 集合中第一个元素的数据属性值。

此外，对一组元素使用 class 而不是 id（id 在上下文中应该是唯一的 - $("#tesq") 将仅 select第一个元素）。

所以根据悬停的元素来做，你可以在事件处理程序回调中使用 this 来引用元素。

PHP :

 <ul class="menu">
    <?php foreach($page->children() as $subpage): ?>
      <li class="tesq" data-color="<?= $subpage->color() ?>">
        <a href="<?= $subpage->url() ?>">
          <?= html($subpage->title()) ?></a>
      </li>
    <?php endforeach ?>
  </ul>

JQUERY :

 $(function() {
    $('.tesq').hover(function() {
        var $this = $(this);
        $("body").css('backgroundColor', function () {
          return $this.data('color')
        });
    }, function() {
        $("body").css('backgroundColor', 'lightgrey')
    });
  })

回调在这里完全没有必要，你可以避免它。

 $(function() {
    $('.tesq').hover(function() {
        $("body").css('backgroundColor', $(this).data('color'));
    }, function() {
        $("body").css('backgroundColor', 'lightgrey')
    });
  })

数据属性只返回第一个值

Data attribute only returning first value

php

jquery

custom-data-attribute