Home > DeveloperSection > Forums > How to Linking different elements together
Pravesh Singh
Pravesh Singh

Total Post:101

Points:709
Posted on    January-20-2015 10:06 PM

 JavaScript JQuery  HTML  CSS 
Ratings:


 1 Reply(s)
 578  View(s)
Rate this:

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?



Mark Devid
Mark Devid

Total Post:101

Points:707
Posted on    January-20-2015 10:40 PM

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:

 


Modified On Jun-26-2016 11:22:44 PM

Don't want to miss updates? Please click the below button!

Follow MindStick