jquery只切换第一个目标

Question

我创建了一个图像显示的切换，在它下面有一个关于我的部分。我使用目标来触发相应的部分。代码在http://codepen.io/CookieFresh89/pen/OPOvXK上运行正常。

然而，当我把它放在我的Wordpress website上时，所有图像都以第一个id =＆＃34; div1＆＃34;为目标。

HTML

<img class="showSingle" target="1" src="http://sogomarketingagency.com/wp-content/uploads/about-me-holder.jpg">

<img class="showSingle" target="2" src="http://sogomarketingagency.com/wp-content/uploads/about-me-holder.jpg">

<div id="div1" class="targetDiv bio">Lorum Ipsum1 <div class="close"><i class="fa fa-times fa-lg"></i></div></div>
<div id="div2" class="targetDiv bio">Lorum Ipsum2</div>

CSS

.targetDiv {
    display: none
}

.bio {
  background: #f6f6f6;
  margin-top: 15px;
  padding: 20px;
  display: none;
  border: 1px solid grey;
  position: relative;
}

jquery的

jQuery(function () {
    jQuery('.showSingle').click(function () {
        var index = $(this).index(),
            newTarget = jQuery('.targetDiv').eq(index).slideDown();
        $(".close").show("fast");
        jQuery('.targetDiv').not(newTarget).slideUp();
    });
  $(".bio").click(function(){
      $(".hide").hide("fast");
      $(this).toggle("fast");
  });
});

Answer 1

声明中：

var index = $(this).index(),

$（this）只有一个元素，因此index始终为1。

使用：

var index = $('.showSingle').index(this),

代替。如果您查看http://api.jquery.com/index/处的jQuery .index（）文档，则会在集合中查找$（＆＃39; .showSingle＆＃39;），以找到与＆＃34;＃34给出的DOM元素匹配的文档。 ＃34;

---

示例代码段

＆＃13;

＆＃13;

$.noConflict(); // this is not a necessary line in your wordpress implemention

    jQuery(function () {
        jQuery('.showSingle').click(function () {
            var index = jQuery('.showSingle').index(this),
                newTarget = jQuery('.targetDiv').eq(index).slideDown();
            jQuery(".close").show("fast");
            jQuery('.targetDiv').not(newTarget).slideUp();
        });
      jQuery(".bio").click(function(){
          jQuery(".hide").hide("fast");
          jQuery(this).toggle("fast");
      });
    });

＆＃13;

.targetDiv {
    display: none
}

.bio {
  background: #f6f6f6;
  margin-top: 15px;
  padding: 20px;
  display: none;
  border: 1px solid grey;
  position: relative;
}

.bio:before,
.bio:after {
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 0px 15px 15px;
    display: block;
    width: 0;
    z-index: 1;
    left: 135px;
}

.bio:before {
  border-color: grey transparent;
  top: -16px;
}

.bio:after {
  border-color: #f6f6f6 transparent;
  top: -14px;
}

.close {
  position: absolute;
    top: 15px;
  right: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


  <img class="showSingle" target="1" src="http://sogomarketingagency.com/wp-content/uploads/about-me-holder.jpg">    
  <img class="showSingle" target="2" src="http://sogomarketingagency.com/wp-content/uploads/about-me-holder.jpg">

    <div id="div1" class="targetDiv bio">Lorum Ipsum1 <div class="close"><i class="fa fa-times fa-lg"></i></div></div>
    <div id="div2" class="targetDiv bio">Lorum Ipsum2 <div class="close"><i class="fa fa-times fa-lg"></i></div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

以下是我在评论中引用的数据属性替代方法。

$(function () {
    $('.showSingle').click(function () {
        var newTarget = $('.targetDiv').eq($(this).data('target')).slideDown();
        // $.eq is 0 based array; data-target
        $(".close").show("fast");
        $('.targetDiv').not(newTarget).slideUp();
    });
  $(".bio").click(function(){
      $(".hide").hide("fast");
      $(this).toggle("fast");
  });
});

.targetDiv {
    display: none
}

.bio {
  background: #f6f6f6;
  margin-top: 15px;
  padding: 20px;
  display: none;
  border: 1px solid grey;
  position: relative;
}

.bio:before,
.bio:after {
    content:'';
    position: absolute;
    border-style: solid;
    border-width: 0px 15px 15px;
    display: block;
    width: 0;
    z-index: 1;
    left: 135px;
}

.bio:before {
  border-color: grey transparent;
  top: -16px;
}

.bio:after {
  border-color: #f6f6f6 transparent;
  top: -14px;
}

.close {
  position: absolute;
    top: 15px;
  right: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="showSingle" data-target="0" src="http://sogomarketingagency.com/wp-content/uploads/about-me-holder.jpg">

<img class="showSingle" data-target="1" src="http://sogomarketingagency.com/wp-content/uploads/about-me-holder.jpg">

<div id="div1" class="targetDiv bio">Lorum Ipsum1 
    <div class="close">
    <i class="fa fa-times fa-lg"></i>
    </div>
</div>
<div id="div2" class="targetDiv bio">Lorum Ipsum2
    <div class="close">
    <i class="fa fa-times fa-lg"></i>
    </div>
</div>