javascript - jQuery:抓取元素并仅应用于其容器

Question

我知道标题令人困惑，但我不知道如何表达它。

fiddle :https://jsfiddle.net/jzhang172/xnem879m/1/

我想要实现的目标:
当我单击每个容器中的 h3 元素时，它会变成一个“x”并拉长容器，当我再次单击它时，它会恢复到其文本和高度。

但是，我的问题是，如果您单击第一个容器之后的另一个容器，它会抓取该 h3 元素并将其应用到其余容器。

要解决此问题，请执行以下操作:
1.) 单击第一个容器
2.) 单击第二个容器
3.) 现在单击第一个容器，它将恢复到其原始高度，但现在它具有第二个容器的 h3 元素。

我发现我的问题是我的第一个函数正在获取 h3 元素，但我真的不知道如何解决这个问题。

$("h3").one("click", function(){
window.h3title=$(this).text(); //Make global variable so next function has access to it.
console.log(h3title);

});

$("h3").click(function(){

if( $(this).parents(".work").height()<200){
 $(this).stop().parents(".work").animate({height: '300px'}, {duration:500, complete:function(){
 $(this).find('h3').text('X');
 
 }
 });
 
 }//IF
 else{
  $(this).stop().parents(".work").animate({height: '100px'}, {duration:500, complete:function(){
  $(this).find('h3').text(h3title);
 
 }
 });
 
 }

  
  });

.work{
  background:blue;
  height:100px;
  width:100%;
}
h3{
  color:red;
  text-shadow:1px 1px 1px black;
  cursor:pointer;
}
span{
  color:white
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work">
  <h3>1 Click me</h3>
  <span>I will Change</span>
</div>
<div class="work">
  <h3>2 Click me</h3>
  <span>I will Change</span>
</div>
<div class="work">
  <h3>3 Click me</h3>
  <span>I will Change</span>
</div>
<div class="work">
  <h3>4 Click me</h3>
  <span>I will Change</span>
</div>
<div class="work">
  <h3>5 Click me</h3>
  <span>I will Change</span>
</div>

Answer 1

问题是您声明的全局变量(并且它不必是全局的。它所要做的就是在作为两个函数作用域的父作用域的作用域中声明。)在每个函数上都会被覆盖调用，并且有权访问它的每个元素都将使用它设置的最后一个值。

例如

1. 将“1 Click me”存储在变量中
2. 将“2 Click me”存储在变量中
3. 将文本恢复到第一个 h3，即现在的“2 Click me”。

解决方案是将数据存储在上下文特定的位置。由于它是一致的，您可以为元素分配一个data-index(或任何您想要的名称)。

$("h3").click(function() {

  if ($(this).parents(".work").height() < 200) {
    $(this).stop().parents(".work").animate({
      height: '300px'
    }, {
      duration: 500,
      complete: function() {
        $(this).find('h3').text('X');

      }
    });

  } //IF
  else {
    $(this).stop().parents(".work").animate({
      height: '100px'
    }, {
      duration: 500,
      complete: function() {
        var $h3 = $(this).find('h3');
        $h3.text($h3.attr('data-index') + ' Click me');

      }
    });

  }


});

.work {
  background: blue;
  height: 100px;
  width: 100%;
}
h3 {
  color: white;
  text-shadow: 1px 1px 1px black;
  cursor: pointer;
}
span {
  color: white
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work">
  <h3 data-index="1">1 Click me</h3>
  <span>I will Change</span>
</div>
<div class="work">
  <h3 data-index="2">2 Click me</h3>
  <span>I will Change</span>
</div>
<div class="work">
  <h3 data-index="3">3 Click me</h3>
  <span>I will Change</span>
</div>
<div class="work">
  <h3 data-index="4">4 Click me</h3>
  <span>I will Change</span>
</div>
<div class="work">
  <h3 data-index="5">5 Click me</h3>
  <span>I will Change</span>
</div>