Question

当我将鼠标悬停在某些列表项上时，我试图获取页面的主体以更改颜色。每个列表项都有自己的颜色，该颜色存储在data属性中，我可以在chrome inspector中看到它。该代码正在执行我想要的操作，但是当我希望正文为每个列表项的颜色时，只返回列表中每个项的第一个颜色。

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

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

除了将class用于一组元素而不是id（ID在上下文中应该是唯一的-$("#tesq")仅选择第一个元素）。

基于悬浮的元素执行此操作，您可以在事件处理程序回调中使用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')
    });
  })

数据属性仅返回第一个值

1 个答案: