I am trying to link several different elements together so
that one specific class element can activate an action on another specific
class element (for instance, if .ph5 is clicked, .art5 will
be visible)
This is what I have so far:
var back = [$(".art1"), $(".art2"), $(".art3"),
$(".art4"), $(".art5"), $(".art6"), $(".art7"),
$(".art8"), $(".art9")];
var front = [$(".ph1"), $(".ph2"), $(".ph3"),
$(".ph4"), $(".ph5"), $(".ph6"), $(".ph7"),
$(".ph8"), $(".ph9")];
$('front').click(function(e) {
var clicked = $(e.clicked);
for (var i = 0; back.length;i++) {
if (clicked.is(front[i]))
{
back[i].show();
}
}
});Unfortunately, this doesn't seem to work for me. Is there
something wrong with my code and/or is there a better way to "link"
multiple classes together?
If you gave them all the same common class it is even simpler. You can get an index from a collection of elements using index() and use eq() to match another set of elements (assumes both sets in same order)
var $front = $('.ph'); // all have same class$front.click(function(){
var index = $front.index(this); // index of element clicked within collection
$('.art').hide().eq(index).show(); // hide all,then show the matching index
});
References: