yoimpetr yoimpetr - 2 months ago 6
HTML Question

jQuery - Setting occurences of a class to their respective data on click

what I want to achieve is setting all occurences of a class to their designated data - except the particular occurence clicked, which is to be set to something unique. My code below gives an undefined error on the "y" variable. How would I go about contextualizing the dataset?

<div id="menu">
<li id="menu-tos" data-info="TERMS OF SERVICE">TERMS OF SERVICE</li>
<li id="menu-contact" data-info="CONTACT">CONTACT</li>
<li id="menu-signup" data-info="SIGN UP">SIGN UP</li>
<li id="menu-login" data-info="LOG IN">LOGIN</li>

$('#menu ul li').click(function() {
i = $(this.id);
y = dataset.info;
$('#menu ul li').not(i).html(y);
$(i).html('Something unique');


(to skip the explanation and see a working version, scroll to the bottom)

Your undefined error is because you trying to access dataset as if it is a variable, when it is actually a property of DOM element objects (details here).

Also, if I'm understanding your desired functionality correctly, there are a couple other issues you'll run into with your code:

  • i = $(this.id); this will resolve to $('menu-tos'). To select via ID, you'd need a #, like this: $('#menu-tos'). In your case, though, there's really no reason to set the current element to a variable anyway, because it is already available via $(this).
  • As mentioned above, y = dataset.info; won't work because dataset is a property on HTML Element objects, not a variable. Since you're using jQuery, it'd be easier to use $(this).data('info').
  • $('#menu ul li').not(i).html(y); this will not do what you said you're trying to do. This will set the HTML of all other <li> elements to the value of the one you just clicked. To set each one to its own value, you'll need to loop through them using .each()
  • $(i).html('Something unique'); assuming i was set correctly as a jQuery object, you don't need the jQuery wrapper here, you can just use i.html('Something unique');

A couple other things that would help your code:

  • The way you are setting your variables now (without using var), it will set them on the global scope. This may work, but it can cause collisions, and is generally avoided. Use var like var i = $(this);, and it will keep that variable only within the scope of your click() function.
  • When using jQuery, you should wrap your code in a $(document).ready() callback. This will ensure that the DOM is loaded before jQuery tries to bind any event handlers (such as your click handler).

After fixing the issues mentioned here, the javascript code ends up looking like:

$(document).ready(function() { // ensure document is loaded before running code
    $('#menu ul li').click(function() {

        // set all other elements to their own data-info attribute value
        $('#menu ul li').not(this).each(function() {
            var info = $(this).data('info');

        // set the clicked item to 'Something unique'
        $(this).html('Something unique');        

Checkout the working code on this JSFiddle.