如何为每篇文章应用jquery函数

Question

I have a DOM-like this. I have a jquery function that checks if there is a class "visible" into the article, remove it and add it on the clicked "hotspot" class. This function has to work for-each "article" independently from the others. I create this function but it doesn't work:

 $("article").each(function() { $("article .hotspot").on("touchstart", function() { $(".hotspot.visible").not(this).removeClass('visible'); $(this).toggleClass('visible'); }) })

 <article> <div class="hotspot"> <div class="hotspot"> </article> <article> <div class="hotspot"> <div class="hotspot"> </article>

Do you have any suggestion?

Answer 1

The main problem will be solved if you remove the .each() loop, check the explanation below.

Explanation:

Since you loop using the .each() method, in every iteration the event will be attached, in your case you've two article's so the event will be attached twice to every item and then it will be fired two times when trigger touchstart .

Then because you're using toggleClass() the first event will add or remove the class then the second one will do the opposite and it'll look like the event isn't fired at all.

 $("article .hotspot").on("touchstart click", function() { $(this).parent().find(".hotspot.visible").not(this).removeClass('visible'); $(this).toggleClass('visible'); });

 .visible { background-color: green; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <article> <div class="hotspot">1</div> <div class="hotspot">2</div> </article> <br> <article> <div class="hotspot">1</div> <div class="hotspot">2</div> </article>

NOTE: To check the behavior that I've explained you can see the console.log('Event fired') inside the event was triggered two times on click.

 $("article").each(function() { $("article .hotspot").on("touchstart click", function() { $(".hotspot.visible").not(this).removeClass('visible'); $(this).toggleClass('visible'); console.log('Event fired'); }) })

 .visible { background-color: green; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <article> <div class="hotspot">1</div> <div class="hotspot">2</div> </article> <article> <div class="hotspot">1</div> <div class="hotspot">2</div> </article>

Answer 2

this should work for you

$("article .hotspot").on("touchstart", function() {
    $("article .hotspot").removeClass('visible');
    $(this).addClass('visible');
});

or

$("article .hotspot").on("click", function() {
    $("article .hotspot").removeClass('visible');
    $(this).addClass('visible');
});

Answer 3

Here you go:

 $("article").each(function() { $(this).children('.hotspot').on("touchstart click", function(){ $(this).siblings().removeClass('active'); $(this).addClass('active'); }) })

 article .hotspot.active{ background: red; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <article> <div class="hotspot">1</div> <div class="hotspot">2</div> </article> <br> <article> <div class="hotspot">1</div> <div class="hotspot">2</div> </article>

If you want to have more than one active hotspot selected, then remove:

$(this).siblings().removeClass('active');

and change:

$(this).addClass('active');

for

$(this).toggleClass('active');