Question

我知道标题令人困惑，但我不确定如何说出来。

小提琴：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

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

E.g。

在变量
在变量
将文字还原到第一个h3，现在是“2点击我”。

解决方案是将数据存储在特定于上下文的位置。由于它是一致的，您可以为元素分配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>

jQuery：抓取元素并仅适用于其容器

1 个答案: