Question

基本上我有多个元素A，B，C，......它们都是“连接”到A1，B1，C1，...... 为了简单和更好地理解，让我们说A，B，C是关于A1，B1，C1人的个人数据（A1，B1，C1是那些人的照片）。

html看起来像：

<div class="personal_data">
     <p class="A"> Ronnie </p>
     <p class="B"> James </p>
     <p class="C"> Dio </p>
</div>

<div class="persons">

 <div>
  <div>
   <div class="A1"> img1 </div>
  </div>
 </div>

 <div>
  <div>
   <div class="B1"> img2 </div>
  </div>
 </div>

 <div>
  <div>
   <div class="C1"> img3 </div>
  </div>
 </div> 

</div>

是的，包含div的{{1}}个嵌套是这样的，的订单不能更改。
img元素为p，并根据点击的人显示在hidden窗口中。
如何在单击一张图片时显示其对应的personal_data元素，其余部分被隐藏，当我点击另一张图片时，它会显示另一张p元素并隐藏上一张，等等？

我尝试了jQuery两种方法：

但是我出于显而易见的原因立即放弃了它。这很难看，我有3个以上的人这样做，这样做对每个人来说都不是一个好习惯。

$(".A1").click(function () {
         $(".A").show();
         $(".B").hide();
         $(".C").hide(); })

因为我不知道$(".persons div").click(function () { var index=$(".persons div").index(this); $(".personal_data p").hide().eq(index).show(); }) jQuery函数（以及所有本机javascript函数）我对它们的强大功能感到惊讶，但由于那些嵌套图像，A的all对应于A1没关系，但其他索引不会与index成对，因为od persons s的数量不相等，而是“移位”+3。因此，我在A，B和C之后调整了div个2个空.personal_data元素，因此p es将对齐。它起作用但我觉得我在违反某些东西是否有更优雅的方式来实现这一目标？我觉得我的问题是缺乏javascript（和jQuery）中存在的所有函数的知识。

Answer 1

提前获取匹配的可点击元素列表和个人数据（因此我们无需继续重新查询）：

var clickables = $('.persons > div > div > div[class]');
var data = $('.personal_data p');

然后，点击后，获取该列表中单击的事物的索引，而不是通过DOM搜索：

clickables.click(
  function() {
    data.hide();                           // hide the others
    var idx = clickables.index(this);
    $(data[idx]).show();
  }
);

var clickables = $('.persons > div > div > div[class]');
var data = $('.personal_data p');

clickables.click(
  function() {
    data.hide();
    var idx = clickables.index(this);
    $(data[idx]).show();
  }
)

.personal_data p {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="personal_data">
  <p class="A">Ronnie</p>
  <p class="B">James</p>
  <p class="C">Dio</p>
</div>

<div class="persons">

  <div>
    <div>
      <div class="A1">img1</div>
    </div>
  </div>

  <div>
    <div>
      <div class="B1">img2</div>
    </div>
  </div>

  <div>
    <div>
      <div class="C1">img3</div>
    </div>
  </div>

</div>

Answer 2

假设您的页面中的类结构一致，我通过比较类名做了一些事情。如果单击的div的类名包含p元素的类名，则会显示p，否则它们将被隐藏：

$(".persons div").click(function () {
   var myclassname = $(this).attr('class');

   $(".personal_data p").hide().filter(function() {
       return myclassname.indexOf($(this).attr('class')) >= 0); //if it contains
   }).show();

});

Answer 3

好吧，我不喜欢在列表中使用索引。我更喜欢你在服务器端使用属性和id来安装它时检索它。

请尝试以下方法：

＆＃13;

$(document).ready(function () {
    $('.personal_data p').on('click', function (event) {
        var theTarget = $(this).attr('data-detail');
        $('.person-details').removeClass('show'); //remove this line in case you don't want only one at a time
        $('#' + theTarget).addClass('show');
    });

})

＆＃13;

.person-details {
        opacity: 0;
}

.person-details.show {
        opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="personal_data">
     <p class="A" data-detail="ronnie"> Ronnie </p>
     <p class="B" data-detail="james"> James </p>
     <p class="C" data-detail="dio"> Dio </p>
</div>

<div class="persons">

 <div>
  <div>
   <div class="A1 person-details" id="ronnie"> img1 </div>
  </div>
 </div>

 <div>
  <div>
   <div class="B1 person-details" id="james"> img2 </div>
  </div>
 </div>

 <div>
  <div>
   <div class="C1 person-details" id="dio"> img3 </div>
  </div>
 </div> 

</div>

＆＃13;

您可以自定义的所有样式或类。如果您更喜欢显示或隐藏，只需将removeClass更改为隐藏，然后将addClass更改为

如果你想要对话互动：

＆＃13;

$(document).ready(function () {
    $('.person-details').on('click', function (event) {
        var theTarget = $(this).attr('data-detail');
        $('.personal_data p').removeClass('show'); //remove this line in case you don't want only one at a time
        $('#' + theTarget).addClass('show');
    });

})

＆＃13;

.personal_data p {
        opacity: 0;
}

.personal_data p.show {
        opacity: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="personal_data">
     <p class="A" id="ronnie"> Ronnie </p>
     <p class="B" id="james"> James </p>
     <p class="C" id="dio"> Dio </p>
</div>

<div class="persons">

 <div>
  <div>
   <div class="A1 person-details" data-detail="ronnie"> img1 </div>
  </div>
 </div>

 <div>
  <div>
   <div class="B1 person-details" data-detail="james" > img2 </div>
  </div>
 </div>

 <div>
  <div>
   <div class="C1 person-details" data-detail="dio"> img3 </div>
  </div>
 </div> 

</div>

＆＃13;

如何显示被点击元素的相应元素？

3 个答案: