0

My CodePen: http://codepen.io/leongaban/pen/IGcBa

I have an Array which contains 5 items:

var home = {
    faqmenu : ['faq-general',
               'faq-protecting',
               'faq-search',
               'faq-incoming',
               'faq-requests']
           };


And my simple list menu in my markup, I'm using the tag data-pane to signal which button is clicked. Then in my jQuery faqpane = $(this).data('pane'); is how it finds out what button is clicked.

<li id="faq-general" data-pane="faq-general" class="faq-menu-item faq-blue">
    <span>General Questions</span>
</li>

<li id="faq-protecting" data-pane="faq-protecting" class="faq-menu-item">
    <span>Protecting Your Data</span>
</li>
...

enter image description here

And I'm trying building a simple Case Switch function which will find out which button is clicked, now with that information I need to perform some actions on the button that was clicked as well as the items that were not clicked.

It's easy to do stuff to the button that was clicked, but how do I target all the other items that were NOT clicked and change their CSS?

$('.faq-menu-item').click(faqMenuShow);
    function faqMenuShow(event) {

        faqpane = $(this).data('pane');
        console.log('The clicked faqpane is: '+faqpane);

        switch (faqpane) {
            case 'faq-general':

                // Do stuff on the faq-general button - easy

                jQuery.each(home.faqmenu, function(index, value) {
                    console.log(this);
                    return (this != "faq-general");
                });

                //  ^ For items that are NOT faq-general
                //  remove this class: .parent().removeClass('faq-blue');

                break;

            case 'faq-protecting':

                break;
            case 'faq-search':

                break;
            case 'faq-incoming':

                break;
            case 'faq-requests':

                break;
        }

    };


My console.log(this); in the jQuery each function spits this out in the console: enter image description here

How would you go about finding the items that were not selected and running some basic functions like removing classes / css on them?

My CodePen: http://codepen.io/leongaban/pen/IGcBa

2
  • I added that I use the tag data-pane to find out what buttons are clicked, I guess I could have used the id, but I like using tags :)
    – Leon Gaban
    Jun 20, 2013 at 15:39
  • Wow so many great answers, checking em all out now...
    – Leon Gaban
    Jun 20, 2013 at 15:57

8 Answers 8

1

Working jsFiddle Demo

There is no need to define a separate array, loop through DOM elements:

$(function () {
    $('.faq-menu-item').on('click', function (event) {
        // remove class `faq-blue` from all menu items
        $('.faq-menu-item').removeClass('faq-blue');

        // add class `faq-blue` to current element
        $(this).addClass('faq-blue');
    });
});
1
  • Wow this was super simple lol... awe kinda feel sad I have to remove my uber complex switch case now, don't get to use em often enough yet... thanks!
    – Leon Gaban
    Jun 20, 2013 at 16:06
1

Simplest way is to check if the id is NOT the same.

Code before switch:

var this_id = this.id;

$('.faq-menu-item').each(function() {
  if (this.id != this_id) {
    $(this).removeClass('faq-blue');
  }
});

http://codepen.io/anon/pen/iFagh

2
  • Cool thanks! I had to update with this for it to work: $('.faq-menu-item').siblings().each(function() { still trying out the other solutions, but yours works great :)
    – Leon Gaban
    Jun 20, 2013 at 15:57
  • This works great if you want to also do specific things when different buttons are clicked.
    – Leon Gaban
    Jun 20, 2013 at 16:26
1

If I understand your question correctly, you are trying to modify the CSS of all the NOT clicked items. So if 'faq-general' is clicked you want to modify the rest of the list items. If this is the case then I think jQuery siblings is what your looking for:

WORKING FIDDLE

 $('.faq-menu-item').on('click', function(){
  $(this).css('background', 'transparent');
  $(this).siblings().css('background', 'red');
});
2
  • The call to .each() is unnecessary (and possibly incorrect with no arguments), so you can just take it out. Setter functions in jQuery already implicitly iterate for you. Jun 20, 2013 at 15:47
  • Oh cool. I did not know that. I was having issues with .each() the other day. Maybe that was it. Jun 20, 2013 at 15:53
1

I suggest taking a more generalized approach to the menu system. Having a case statement makes the function difficult to maintain (since every time you add a new menu, you have to modify this function).

I would do a few things:

1) create a variable that selects all menu items. This way you are not re-selecting them every click.

 var allMenus = $(".faq-menu-item");

2) If you have a set of functions that are called for each menu item, treat them as properties of an object like this:

var menuActions = { general: myFuncGeneral, protecting: myFuncProtecting};

3) Handle the click in a more generic way:

function faqMenuShow(event, allMenus) {
    //this is a string the connects to the menuActions e.g. 'general'
    var clickedMenu = $(this).id().replace('faq-',''); 

    //this removes all blue classes on everything first, then re-adds to the clicked one.
    allMenus.removeClass('faq-blue').filter(this).addClass('faq-blue');

    allMenus[clickedMenu](); //this executes the function in the allMenus object
};
1
  • Oh that is neat, will have to try this out
    – Leon Gaban
    Jun 20, 2013 at 16:15
0

I don't know if that can be done with jQuery, but I'm a beginner web developer.

What I think you could do is to add a "clicked" class to the element clicked, then check all the other elements not with that class and work on them.

0

How about make a seperate function and pass the button that was clicked, iterate over the array and put a simple conditional check

If (passedElement != arrayElement) { do css stuff here } else { // this is the button clicked, make active element

0

Inside your click event handler function, select all the menu items:

$('.faq-menu-item')

then exclude the one that's been clicked on:

.not(this);

So, adding those together, you get:

var notClicked = $('.faq-menu-item').not(this);

Then you'd just call the jQuery functions you'd need to on that, for example:

notClicked.css('color', 'red');
0

You have done something so complex for a very simple thing.

Just check whether or not the date-pane is the one you want for concrete actions for the clicked button and then work with its siblings for the general actions for the not clicked elements.

$('.faq-menu-item').click(function (e) {
    faqpane = $(this).data('pane');

     switch (faqpane) {
         case 'faq-general':
            //do whatever you want
            alert("FAQ general");

            break;

         case 'faq-protecting':
           //do whatever you want
           alert("FAQ Protecting");

           break;
    }

    // etc...

    var notClicked = $(this).siblings();

    //action for the not clicked elements
    notClicked.each(function(){
        $(this).css('background', '#ccc');
    });
});

LIVING EXAMPLE

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.