Run Javascript based on HTML class clicked

Question

I have a tiny script I'm working on :)

The idea is if the span tag just contains autocompleteitem and not autocompleteitem autocompleteitemwithcontainer then it'll display the word hello. Right now it displays hello for both :(

Demo: https://jsfiddle.net/L33mqqtp/

$(document).ready(function() {
          $(document).on('click','.autocompleteitem',function(){
            $("div").show();
        });
    });

How do I update my code to do this?

Ilya Hoilik · Accepted Answer · 2017-04-04 20:50:35Z

3

Try this

'click','.autocompleteitem:not(.autocompleteitemwithcontainer)'

answered Apr 4, 2017 at 20:50

Ilya Hoilik

1541 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

michaelmcgurk Over a year ago

Wow - amazing. Thank you, Ilya :-)

tao · Accepted Answer · 2017-04-04 20:51:41Z

1

They both have .autocompleteitem class! To obtain what you want, use a different selector, which only applies to first one:

$(document).ready(function() {
  $(document).on('click','.autocompleteitem:not(".autocompleteitemwithcontainer")',function(){
    $("div").show();
  });
});

answered Apr 4, 2017 at 20:51

tao

91.1k18 gold badges136 silver badges174 bronze badges

Comments

Zain Hatim · Accepted Answer · 2017-04-04 20:55:28Z

1

try this

$(document).ready(function() {
    $("span").on('click', function(){
        if(this.className == "autocompleteitem")
            $("div").show();
     });
});

answered Apr 4, 2017 at 20:55

Zain Hatim

806 bronze badges

Comments

Colton McCormack · Accepted Answer · 2017-04-04 20:57:54Z

Use the attribute selector syntax. That will allow you to directly match an entire attribute. This way you don't have to make a bunch of different combinations for each thing that you don't want to be selected.

Example selector: jQuery('[class="autocompleteitem"]')

Working Example:

$(document).ready(function() {
          $(document).on('click','[class="autocompleteitem"]',function(){
            $("div.containertoshow").toggle();
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="autocompleteitem">Should work</a><br>
<a href="#"class="autocompleteitem autocompleteitemwithcontainer">Should not work</a>

<div class="containertoshow" style="display:none;">That button does toggle me on/off!</div>

Collectives™ on Stack Overflow

Run Javascript based on HTML class clicked

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related