jquery 仅切换第一个目标

Question

我为图像创建了一个切换开关，在其下方显示关于我的部分。我使用目标来触发适当的部分。该代码在 http://codepen.io/CookieFresh89/pen/OPOvXK 上运行良好。

然而，当我把它放在我的 Wordpress website 上时，所有图像都以第一个 id="div1".

为目标

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)只有一个元素，所以索引总是1。

使用：

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

相反。如果您查看 http://api.jquery.com/index/ 处的 jQuery .index() 文档，它会在集合 $('.showSingle') 中查找与 DOM 元素匹配的那个 "this".

示例代码片段

$.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");
      });
    });

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

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>

jquery 仅切换第一个目标

jquery toggle only first target

html

css

wordpress

jquery

示例代码片段