Passing IDs to jquery functions

Question

Okay guys, I greet you all! I have been having this newbie question in jquery. I love the great animations that jquery can do and all those cool Mozilla stuff! Okay that's by the way! I have a couple of DIV elements with different IDs that i have been trying to show/hide through a function passed into javascripts onclick() method. I have gone through a couple of a examples presented in the Questions section, but I don't understand why what am doing isn't working!

Now this is my jquery code:

$(document).ready(function(){ 
   var toggle_btn = $('.toggle-button');
   var contentToggle = function(element){
      toggle_btn.click(function(e){
         If($(this).hasClass('switch-off')){
            $(this).removeClass('switch-off');
            $(this).addClass('switch-on');
            $('#' element).hide();
         }else{
            $(this).removeClass('switch-on');
            $(this).addClass('switch-off');
            $('#' element).show();
         }
         e.preventDefault();
      });
   } 
   contentToggle();
});

The following is path of my html:

<a href='' onclick='contentToggle('color-list') class='toggle-button switch-off'>
<div id="color-list">Container Contents</div>

And my css:

#color-list{display:none;}

Unfortunately, this doesn't seem to work however I tried! Please can you guys help point me in the right direction? What haven't I done correctly?

$('#' element) should be $('#' + element) The '#' and element variable need to be concatenated. — CM Kanode, May 14 '14 at 16:59
So sorry for that typo! @Kanode, It's suppose to be $('#'+element); and not ('#' element); — aknessy, May 14 '14 at 17:02
@kanode, it was a typo on my part! That's what I meant to write! — aknessy, May 14 '14 at 17:05

stripthesoul · Accepted Answer · 2014-05-14T23:45:42.593

1

There are some issues with the code, some pointed out by the comments, but the main one is how you are approaching the onClick event. You are wiring up your click event inside a function then calling it, you should have defined it within the $(document).ready scope instead, also you would not need an inline onClick event after you do that.

Here is a JSFiddle with my 'recommended' code. I hope it helps you out.

http://jsfiddle.net/V54fJ/2/

HTML:

<button class='toggle-button switch-on'>Test</button> <div id="color-list">Container Contents</div>

JAVASCRIPT:

$(document).ready(function(){ 
    $('.toggle-button').click(function(event){
        if($(this).hasClass('switch-off')){
            $(this).removeClass('switch-off');
            $(this).addClass('switch-on');
            $('#color-list').hide();
        } else {
            $(this).removeClass('switch-on');
           $(this).addClass('switch-off');
           $('#color-list').show();
        }
        event.preventDefault();
    });
});

If you still want to keep a separate function where you can still send the ElementId as a variable, you can do something like that: (http://jsfiddle.net/V54fJ/3/)

$(document).ready(function(){   

     $('.toggle-button').on('click', 
                            function(event){
                                toggleVisibility(this,'color-list');
                                event.preventDefault();
                            });

     function toggleVisibility(caller,elementId)
     {
      if($(caller).hasClass('switch-off')){

             $(caller).removeClass('switch-off');
             $(caller).addClass('switch-on');
             $('#'+elementId).hide();
     }
      else{

             $(caller).removeClass('switch-on');
             $(caller).addClass('switch-off');
             $('#'+elementId).show();
     }

     }  });

edited May 14 '14 at 23:45

answered May 14 '14 at 17:18

stripthesoul

362
1
8

I do appreciate your response, the truth is; the "element" in the function's parameter is supposed to be the DIV element I want to show/hide! If I understand your code; it has been tailored for a particular element with an ID '#color-list'! What I am trying to do is aim for a situation where the function takes an ID as a parameter so that It can be used with an element whose ID isn't yet known! Hence the expression: ('#'+element)! I hope you understand what I mean? – aknessy May 14 '14 at 18:49
I know I can toggle this DIVs individually like say; $('#div1').hide()/show(), ('#div2').hide()/show() and so on which isn't what I want to achieve! – aknessy May 14 '14 at 18:55
I understood your question, here is a new JSFiddle that might have what you need: http://jsfiddle.net/V54fJ/3/, what do you think? – stripthesoul May 14 '14 at 19:03
It still boils down to the fact that I'll have to call that function several times for different elementIDs! Thanks for everything! Your help is immeasurable! – aknessy May 14 '14 at 19:58
Yep, you would still have to call the function with a different elementID and based on the event's owner. You are most welcome, I hope I helped you learn something new. – stripthesoul May 14 '14 at 20:07
1

I think you deserved more than just a "Thank You!" You deserve a bottle of beer. It does exactly what I want! Thumbs up dude! I've learnt more than you can imagine! – aknessy May 14 '14 at 20:29
One more thing @stripTheSoul: what's the difference bw var this; and var $this? Cos I noticed when you used if($(caller)... When the parameter was 'caller' alone!? Does it mean javascript/jquery doesn't have a specific way of declaring variables? – aknessy May 14 '14 at 20:35
One of the most important things to learn when coding in javascript is the 'this' object. Here is a link to get you started: http://stackoverflow.com/questions/133973/how-does-this-keyword-work-within-a-javascript-object-literal – stripthesoul May 14 '14 at 23:42

Jay Blanchard · Answer 2 · 2014-05-14T17:40:27.243

If you're using jQuery you really do not need the inline JavaScript calls. Modify your HTML to be this -

<a href='' class='toggle-button switch-off'>Click Me</a>
<div id="color-list">Container Contents</div>

A few modifications to your jQuery will complete the deal -

var contentToggle = function(element){
    if( $(element).hasClass('switch-off')){ // lowercase i on 'if'
        $(element).toggleClass('switch-off switch-on');
        $('#color-list').hide();
     }else{
        $(element).toggleClass('switch-on switch-off');
        $('#color-list').show();
     }
  } 

$('.toggle-button').click(function(e) {
    e.preventDefault();
    contentToggle( $(this) ); // pass the toggle-button to the function
});

In your original you're passing element to the function and trying to use $(this) inside the function. $(this) is not defined inside of contentToggle.

Here is a demo - http://jsfiddle.net/jayblanchard/zZd8R/ (keep in mind that color-list will not show on the first click, because the first click still directs the list to be hidden)

I know It isn't adviceable to do inline javascript while using jquery, but I had a feeling a little obtrusive coding wouldn't do a great lot of harm to the overall jquery fun! @Jay — aknessy, May 14 '14 at 19:12

Passing IDs to jquery functions

2 Answers2