jquery replace menu item text on hover

I have the following simple nav menu (there are no sub-menu items) and I need the text of each menu item to change upon hover. The default text is in the a href tags, the hover text is in the data-item attribute. I've tried variations of some jQuery code posted here, but I'm not getting it right. Any help would be appreciated.

HTML

<ul id="menu">
<li class="menu-item" data-item="Research"><a href="#research">01/08</a></li>
<li class="menu-item" data-item="Awards"><a href="#awards">02/08</a></li>
<li class="menu-item" data-item="Education"><a href="#education">03/08</a></li>
<li class="menu-item" data-item="Publications"><a href="#publications">04/08</a></li>
</ul>


jQuery:

$('li > .menu-item').hover(
function() {
var $this = $(this); // caching $(this)
$this.data('a href', $this.text());
$this.document.getElementById("data-item");
},
function() {
var $this = $(this); // caching $(this)
$this.text($this.data('a href'));
});


2 Answers
2

There are a few issues with your code:

You shouldn't have multiple elements having same ID. So I have removed the ID attributes from the elements, and changed the selector from $("#menu-item") to $(".menu-item").

$("#menu-item")

$(".menu-item")

$this.document.getElementById("data-item"); this is not only unnecessary, but incorrect. $(this) i.e. the element being hovered doesn't have a document property.

$this.document.getElementById("data-item");

$(this)

document

Other than that, you simply need to update the text of a element ($this.find("a")) using the text from attribute data-item (accessible using $this.data("item")).

a

$this.find("a")

data-item

$this.data("item")

You can find the working snippet below:

$('.menu-item').hover(
function() {
var $this = $(this);
var currentText = $this.text();
var textToUpdate = $this.data("item");
$this.data('a-href', currentText);
$this.find("a").text(textToUpdate);
},
function() {
var $this = $(this);
var textToUpdate = $this.data("a-href");
$this.find("a").text(textToUpdate);
}
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul id="menu">
<li class="menu-item" data-item="Research"><a href="#research">01/08</a></li>
<li class="menu-item" data-item="Awards"><a href="#awards">02/08</a></li>
<li class="menu-item" data-item="Education"><a href="#education">03/08</a></li>
<li class="menu-item" data-item="Publications"><a href="#publications">04/08</a></li>
</ul>

setTimeout

.delay()

You need mouseover and mouseleave.Also you can create another data attribute like data-dt to store the date and avoid the variable to keep track

mouseover

mouseleave

data-dt

$('.menu-item').on('mouseover', function() {
$(this).find('a').text($(this).data('item'))
})
$('.menu-item').on('mouseleave', function() {
$(this).find('a').text($(this).data('dt'))

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
<li id="menu-item-1" class="menu-item" data-item="Research" data-dt='01/08'><a href="#research">01/08</a></li>
<li id="menu-item-2" class="menu-item" data-item="Awards" data-dt='03/08'><a href="#awards">02/08</a></li>
<li id="menu-item-3" class="menu-item" data-item="Education" data-dt='03/08'><a href="#education">03/08</a></li>
<li id="menu-item-4" class="menu-item" data-item="Publications" data-dt='04/08'><a href="#publications">04/08</a></li>
</ul>

hover

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.