0

I'm building a website in asp.net and just started to learn javascript.

I'm trying to make a little dynamic menu so when you click on a tab, it will show and hide the menus.

On the tabs, the links (a) have an attribute called target_menu which hold the menu name. The menus have an attribute called menu, which of course holds its name.

In my javascript, on jquery.ready I have it create the onclick events for each tab, but every time I click a tab they all seem to be using the target_menu attribute from the last item in the list.

Here is my code.

$(document).ready(function () {

    var navItems = $("a[target_menu]");  

    for (var i = 0; i < navItems.length; i++) {
        var t = $(navItems[i]).attr('target_menu');         

        //When this isn't commented it will display each item of the list correctly.
        //alert(t); 


        //But when this is called its only giving me the last item in the list.
        navItems[i].onclick = function () { EnableMenu(t.toString()); };
        //$(navItems[i]).on('click', function () { EnableMenu($(navItems[i]).attr('target_menu')); });     
    }

    var target = $("a.active[target_menu]").attr('target_menu');   

    ToggleMenu(target);
});


function EnableMenu(menu)
{
    alert(menu);

    $("a[target_menu]").removeClass('active');
    $("a[target_menu='" + menu + "']").addClass('active');

    ToggleMenu($("a[target_menu='" + menu + "']").attr('target_menu'));
}

function ToggleMenu(target)
{ 
    $("[menu='" + target + "']").show();
    $("[menu][menu!='" + target + "']").hide();
}

I thought it may have something to do with passing the variable t, and setting it each time in the loop, so I added the .tostring() but am still getting the same issue. When I didn't use t I kept getting undefined, and I couldn't get the jquery on('click'... to work at all.

So even though I used .tostring() when onclick is called it still seems to be referencing the t variable, and converting it to a string, instead of just passing it.

LittleRain
  • 47
  • 1
  • 8
  • No need to pre-fetch the attribute. `navItems[i].onclick = function () { EnableMenu(this.getAttribute("target_menu").toString()); };` –  Jan 04 '18 at 01:12
  • If you search about adding event handlers in a loop, you'll find answers from the many thousands of times this has been asked before. –  Jan 04 '18 at 01:13
  • Your `i` is getting its last value before `var target = $("a.active[target_menu]").attr('target_menu');` executes. That's why. The loop has ended at this point. – Louys Patrice Bessette Jan 04 '18 at 01:16
  • Thanks rock star, I was just reading my book and came across that. Was just going to update but you beat me too it. Right, I'm not the best at wording questions all the time, should have thought about searching that. – LittleRain Jan 04 '18 at 01:16
  • Also, this code: `$("a[target_menu='" + menu + "']").attr('target_menu')` You're searching for an element matching its `target_menu` so that you can ask the element for its `target_menu`. Seems like you already have what you need there. –  Jan 04 '18 at 01:16
  • Yes I knew that Louys, just didn't make sense that its still doing that even though I added the .tostring(). C# would not have done that. – LittleRain Jan 04 '18 at 01:17
  • When I did it that way rock star it was giving me an undefined string. Its not liking the loop for some reason. – LittleRain Jan 04 '18 at 01:18
  • You could just do `$("a[target_menu]").on('click', function(event) { /* do stuff */ })` to attach the handler to all existing elements matching the selector, shouldn't have to loop through. – csp713 Jan 04 '18 at 01:24
  • Which is the `a.active` at the end of the loop? Are your sure there is only one? – Louys Patrice Bessette Jan 04 '18 at 01:24
  • Can't publish my code because the question was locked. I think all the code you need in document ready is: `$("a[target_menu]").click( function (e) { var target = $(e.target).attr('target_menu'); EnableMenu(target); ToggleMenu(target); } );` – derloopkat Jan 04 '18 at 01:39
  • Oh sorry guys I had figured it out, instead of a loop I used plain jquery. – LittleRain Jan 06 '18 at 04:50

0 Answers0