How to Linking different elements together

Total Post:101

JQuery  HTML  CSS 
 1323  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 ([i])) {

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?

  1. Post:102

    Re: How to Linking different elements 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
       var index = $front.index(this); // index of element clicked within collection
       $('.art').hide().eq(index).show();  // hide all,then show the matching index



      Modified On Apr-08-2018 11:40:57 PM