Question

我正在尝试将几个不同的元素链接在一起，以便一个特定的类元素可以激活另一个特定的类元素上的操作（例如，如果单击.ph5，.art5将是可见的）< / p>

这是我到目前为止所做的：

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

不幸的是，这对我来说似乎不起作用。我的代码是否有问题和/或是否有更好的方法来链接＆＃34;多个班级在一起？

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

认为有一种更简单的方法可以使用jquery选择器element[attr^='value']，它可以选择所有elements，attr以value开头。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

您无法使用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();
  }
 }
});

将不同的元素链接在一起

3 个答案: