-3

i have found the below code which adds a class of Blue when a it has a specific class of Select, however it is applying it to the whole menu. I wish to apply it on click when it has the class of Select. I wish to apply an effect to the li before so that i can apply and :after and :before style.

This is the original code:-

<script>
    $(document).ready(function() {
    if ($('#headerContent ul li a').hasClass('select')) {
    $('#headerContent ul li a').addClass('Blue');
    }
   });
 </script>

This is my rewrite which appears to not work.

<script>
    $(document).ready(function() {
        if ($('#headerContent ul li a').hasClass('select')).onClick(function() {
    $('#headerContent ul li').addClass('Blue');}) 
     });
</script>

EDIT:

This i feel is not a duplicate! Maybe i should have explained it more. Im using this in conjunction with a jquery plugin for scrolling which adds the class select when clicked! I am using this plugin Smooth scrolling, which adds a class of select to the anchor tag.

I have put a jsfiddle together:

http://jsfiddle.net/axajLjb1/1/

I have updated my fiddle. Basically as you can see it applies a class on click when it has select, however it is not removing it when i click another option.

Kirsty Marks
  • 95
  • 1
  • 8
  • You want to apply the `Blue` class just to the anchor tag? – putvande Aug 25 '15 at 11:02
  • Your rewrite attempt has some serious issues. You can't call a function on an if statement... I suggest you start reading some basic javascript tutorials as you are clearly missing some basic understandings of the langauge – musefan Aug 25 '15 at 11:05
  • I am wanting to add a class of Blue to the li when the anchor tag has a class of "Select". This is being added by a jquery scrolling plugin. – Kirsty Marks Aug 25 '15 at 11:26
  • 1
    @KirstyMarks: I suggest you add some html in your question, also if you could provide a full example [JSFiddle](http://jsfiddle.net/) that would help to make sure we provide answer that definitely work – musefan Aug 25 '15 at 11:30

2 Answers2

4

You should delegate event instead to get selector filtered on the fly, supposing .select element can vary depending user interaction:

$(document).ready(function () {
    $('#headerContent ul li').on('click', 'a.select', function () {
        $(this).addClass('Blue');
    });
});

I am wanting to add a class of Blue to the li when the anchor tag has a class of "Select".

So then, use:

$(document).ready(function () {
    $('#headerContent ul li').on('click', 'a.select', function () {
        $(this).closest('li').addClass('Blue');
    });
});

And now i'm wondering if you want it on click or not?! If not, but when .select class is added by plugin, it is surely a XY problem. Your question is too much poorly asked imho... And in this case, use any plugin callback, check DOC. But of course, we don't know which plugin are you talking about, so...

A. Wolff
  • 74,033
  • 9
  • 94
  • 155
  • A Wolff, I did update my question to be more specific. The plugin applies a class of select on click. I have also specified the plugin that i am using as well as a JS fiddle to outline this. – Kirsty Marks Aug 25 '15 at 11:45
  • And when the class `Blue` should be added? I still don't get what is your expected behaviour – A. Wolff Aug 25 '15 at 11:47
  • I will update again, apologies. I have updated it again. I want to apply it to the li before so that I can add an after and before selector – Kirsty Marks Aug 25 '15 at 11:49
  • 1
    @KirstyMarks `I wish to apply an effect to the li before so that i can apply and :after and :before style.` Honestly, i think you should re-ask a new question with **clear** statement of what you are expecting because personaly i don't see any relation between using some pseudo elements as `:before` & `:after` & regarding adding a class `Blue`. I'm sorry but i'm giving up – A. Wolff Aug 25 '15 at 11:54
1

If you want to attach the event ti anchor element that have select,then:

$(document).ready(function() {
 $('#headerContent ul li a.select').click(function() {
 $('.Blue').removeClass('Blue');
 $(this).parent().addClass('Blue');//add class blue to currently clicked anchor with class select
 }); 
});

If you want the click to be occurred only when element has select,then you can either use event delegation or add a check in handler above to check if element has select class.

 $(document).ready(function() {
   $('#headerContent ul li').on('click','a.select',function() {
     $('.Blue').removeClass('Blue');
     $(this).parent().addClass('Blue');//add class blue to currently clicked anchor with class select
   }); 
 });
Milind Anantwar
  • 81,290
  • 25
  • 94
  • 125