Data attribute only returning first value - php

Question

I'm trying to get the body of my page to change color when hovering over some list items. Each list item has its own color stored in a data attribute, which I can see in the chrome inspector. The code is doing what I'd like, but returning only the first color in the list for every item, when I want the body to be the color of each list item.
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')
});
})
Any help much appreciated

Answer 1

In your current code, you are trying to get data attribute from the entire collection so it will return the data attribute value of the first element among the collection.
In addition to that use class for a group of elements instead of the id(id should be unique in the context - $("#tesq") will select only the first element).
So do it based on the hovered element, where you can use this inside the event handler callback to refer the eleemnt.
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')
});
})
The callback is completely unnecessary here and you can avoid it.
$(function() {
$('.tesq').hover(function() {
$("body").css('backgroundColor', $(this).data('color'));
}, function() {
$("body").css('backgroundColor', 'lightgrey')
});
})