Linking различные элементы вместе

Question

Я пытаюсь соединить несколько разных элементов таким образом, чтобы один конкретный элемент класса может активировать действие на другой конкретный элемент класса (например, если .ph5 щелчке .art5 будет виден)

Это что я до сих пор:

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(); 
    } 
    } 
}); 

К сожалению, это не работает для меня. Что-то не так с моим кодом и/или есть лучший способ «связать» несколько классов вместе?

Answer 1

Если вы дали им все же общий класс это еще проще. Вы можете получить индекс из коллекции элементов с использованием index() и использовать eq(), чтобы соответствовать другой набор элементов (предполагается, что оба набора в одном заказе)

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 
}); 

рекомендации:

index() API Docs

eq() API Docs

DEMO

Answer 2

Вы не можете получить доступ к элементу массива, используя front[i] и back[i]. Вы можете достаточно создать объект массива и доступ к элементам по .eq() селектору:

$(front).click(function(e) { 
    var clicked = $(e.clicked); 
    for (var i = 0; back.length; i++) { 
    if (clicked.is($(front).eq(i))) { 
    $(back).eq(i).show(); 
    } 
} 
}); 

Answer 3

Мысль есть более простой способ сделать это с помощью селектора JQuery element[attr^='value'], который может выбрать все elements с attr начала с value.

$("div[class^='ph']").click(function() { 
 
    var newid = $(this).attr("class").replace("ph", "art"); 
 
    $("." + newid).show(); 
 
});

.art1, 
 
.art2, 
 
.art3 { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div class="ph1">ph1</div> 
 
<div class="ph1">ph1</div> 
 
<div class="ph2">ph2</div> 
 
<div class="ph2">ph2</div> 
 
<div class="ph3">ph3</div> 
 
<div class="ph3">ph3</div> 
 
<br> 
 
<div class="art1">art1</div> 
 
<div class="art1">art1</div> 
 
<div class="art2">art2</div> 
 
<div class="art2">art2</div> 
 
<div class="art3">art3</div> 
 
<div class="art3">art3</div>