I got list of elements, when i click on first other 10 are also active, how to target only one that is really active? this is my js code
$(document).ready(function() {
$('.inspiration-row').on('click', function() {
$('inspiration-block').toggleClass('shift-left shift-right');
//$('.inspiration-block').toggleClass('span12 span8');
$('.inspiration-right').toggleClass('span0 span2');
});
});
Following this js fiddle link you can get an answer of your question according to your requirement.
Let us consider set of p tags in your html page .
<p class="active">If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
<p>Click me one!</p>
<p>Click me two!</p>
<p>Click me three!</p>
<p>Click me four!</p>
To handle active p tag use the following jquery code
$(document).ready(function() {
$("p").click(function(event) {
$(event.target.tagName).not(this).removeClass("active");
$(this).addClass("active");
});
});
And add this class in your html page in style tag.
.active {
display: block;
color: red;
}
I wrote a fiddle to demonstrate my solution (let me know if it does not do exactly what you intended).
$(function($) {
$(document).on('click', '.inspiration-row', function(event) {
var target = $(event.target).closest('.inspiration-row');
target.find('.inspiration-block').toggleClass('shift-left shift-right');
//$('.inspiration-block').toggleClass('span12 span8');
target.find('.inspiration-right').toggleClass('span0 span2');
});
});
This registers a ready callback that captures $ so if another script loads jquery, it won't affect us. It uses event delegation to capture all click events on the entire page that occur inside an element matching .inspiration-row.
The event.target refers to the source of the event, the element that the event came from. I use .closest to search up from the one actually clicked to find the nearest ancestor that matches .inspiration-row.
From there, target refers to that whole .inspiration-row, we look for those two descendent selectors and toggle the appropriate classes.
You were toggling both class names, as though that would make it pick one or the other. That is only true if the element initially has one of those names. I added one of the class names to the first inspiration-row so the toggles will make it have one or the other, at any one time.
you can replace your click call back function with something like the below to target the specific block you're interested in:
function( event ) {
$(event.target).closest('.inspiration-block').toggleClass('shift-left shift-right');
...
});
Use
$(this).toggleClass('shift-left shift-right');
$(this).toggleClass('shift-left shift-right');