jQuery - 查找最后选择的元素

时间：2017-10-09 11:43:53

标签： javascript jquery css

我正在从Head First系列中学习jQuery并处理他们的一个例子，我需要找到最后选择的元素。

以下是我在第2章中的内容：该页面包含四个图像，当用户点击它们时，会在每个图像的底部显示一条随机折扣消息。为了让事情看起来更有趣，我将slideUp()函数添加到我从同一本书中学习第1章的消息中。

这是我走了多远：当用户点击其中一张图片时，随机折扣信息会在其下方向下滑动以显示其消息。当用户单击任何其他图像时，先前的消息将向上滑动，并且新的随机折扣消息将在所单击的图像下方向下滑动。这是我的代码的简化版本。

$('.jumpDiv').click(function () {
                $('.jumpDiv').children('.discountDiv').slideUp();
     $('.jumpDiv p').remove();
     var discount = Math.floor((Math.random() * 5) + 5);
     var msg = '<p>Your discount is ' + discount + '%</p>';
     $(this).children('.discountDiv').append(msg);
     $(this).children('.discountDiv').slideDown();
});
.jumpDiv{
    float:left;
}
#main{
    border:1px solid;
    height:500px;
    width:auto;
    background-color: grey;
}
 #main .jumpDiv{
    border-right: 1px solid;
    border-bottom: 1px solid;
    height:245px;
    width:245px;
    font-size:20px;
}
#main .jumpDiv>div{
    text-align:center;
    background-color:#fee;
    cursor: pointer;
    
}
.discountDiv{
    text-align: center;
    display:none;
    border:1px solid;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
<div id="main">
            <div class="jumpDiv">
                <div> Click Here</div>
                <div class="discountDiv">

                </div>
            </div>
            <div class="jumpDiv">
                <div> Click Here</div>
                <div class="discountDiv">

                </div>
            </div>
            <div class="jumpDiv">
                <div> Click Here</div>
                <div class="discountDiv">

                </div>
            </div>
            <div class="jumpDiv">
                <div> Click Here</div>
                <div class="discountDiv">

                </div>
            </div>
        </div>
        <script
			  src="https://code.jquery.com/jquery-3.2.1.js"
			  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
			  crossorigin="anonymous"></script>
</body>

我需要删除的故障是，如果用户反复点击同一个div，折扣消息div应该保持不变，只是更新随机生成的内容。如果用户再次单击相同的div，如何阻止此div上下滑动。有没有办法访问最后一次单击的元素，并以某种方式停止折扣消息在更新消息之前向上滑动。

7 个答案:

答案 0 :(得分：2)

您必须存储对lastClicked实体的引用，并将其与下次点击的值进行比较，如果它同样不做任何事情。看看以下内容。

＆＃13;
＆＃13; 
var lastClicked = null;
$('.jumpDiv').click(function () {
     if(lastClicked === this) {
         /*Don't do anything*/
         return;
     }

     $('.jumpDiv').children('.discountDiv').slideUp();
     $('.jumpDiv p').remove();
     var discount = Math.floor((Math.random() * 5) + 5);
     var msg = '<p>Your discount is ' + discount + '%</p>';
     $(this).children('.discountDiv').append(msg);
     $(this).children('.discountDiv').slideDown();
    
     lastClicked = this;
});
＆＃13; 
.jumpDiv{
    float:left;
}
#main{
    border:1px solid;
    height:500px;
    width:auto;
    background-color: grey;
}
 #main .jumpDiv{
    border-right: 1px solid;
    border-bottom: 1px solid;
    height:245px;
    width:245px;
    font-size:20px;
}
#main .jumpDiv>div{
    text-align:center;
    background-color:#fee;
    cursor: pointer;
    
}
.discountDiv{
    text-align: center;
    display:none;
    border:1px solid;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
<div id="main">
            <div class="jumpDiv">
                <div> Click Here</div>
                <div class="discountDiv">

                </div>
            </div>
            <div class="jumpDiv">
                <div> Click Here</div>
                <div class="discountDiv">

                </div>
            </div>
            <div class="jumpDiv">
                <div> Click Here</div>
                <div class="discountDiv">

                </div>
            </div>
            <div class="jumpDiv">
                <div> Click Here</div>
                <div class="discountDiv">

                </div>
            </div>
        </div>
        <script
			  src="https://code.jquery.com/jquery-3.2.1.js"
			  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
			  crossorigin="anonymous"></script>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：2)

您可以将代码更改为仅slideUp()可见.discountDiv，如果已点击的元素已经显示，则跳过该代码。您可以使用jQuery选择器:visible来执行此测试。此外，您可以跳过删除<p>元素的需要，只需每次都设置html而不是附加。

$('.jumpDiv').click(function () {
  //Store these so you are not doing multiple selection calls.
  var jumpDiv = $(this);
  var discountDiv = jumpDiv.children('.discountDiv');

  var discount = Math.floor((Math.random() * 5) + 5);
  var msg = '<p>Your discount is ' + discount + '%</p>';
  discountDiv.html(msg);

  //If element was not visible it means some other is and needs hiding
  if(!discountDiv.is(':visible')){
    //select all dicountDiv's that are currently visible and hide them
    $('.discountDiv:visible').slideUp();
  }
  discountDiv.slideDown();     
});

演示

＆＃13;
＆＃13; 
$('.jumpDiv').click(function() {
  var jumpDiv = $(this);
  var discountDiv = jumpDiv.children('.discountDiv');
  var discount = Math.floor((Math.random() * 5) + 5);
  var msg = '<p>Your discount is ' + discount + '%</p>';
  discountDiv.html(msg);
  if (!discountDiv.is(':visible')) {
    $('.discountDiv:visible').slideUp();
  }
  discountDiv.slideDown();
});
＆＃13; 
.jumpDiv {
  float: left;
}

#main {
  border: 1px solid;
  height: 500px;
  width: auto;
  background-color: grey;
}

#main .jumpDiv {
  border-right: 1px solid;
  border-bottom: 1px solid;
  height: 245px;
  width: 245px;
  font-size: 20px;
}

#main .jumpDiv>div {
  text-align: center;
  background-color: #fee;
  cursor: pointer;
}

.discountDiv {
  text-align: center;
  display: none;
  border: 1px solid;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <div id="main">
    <div class="jumpDiv">
      <div> Click Here</div>
      <div class="discountDiv">

      </div>
    </div>
    <div class="jumpDiv">
      <div> Click Here</div>
      <div class="discountDiv">

      </div>
    </div>
    <div class="jumpDiv">
      <div> Click Here</div>
      <div class="discountDiv">

      </div>
    </div>
    <div class="jumpDiv">
      <div> Click Here</div>
      <div class="discountDiv">

      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

我使用了一个类来确定哪一个是开放的。然后测试我们即将关闭的那个是否与我们要打开的那个关闭相同，并且如果它们不相同则仅关闭它。

＆＃13;
＆＃13; 
$('.jumpDiv').click(function() {
  var activeDiscount = $('.discountDiv.active');
  if (activeDiscount.closest('.jumpDiv')[0] != $(this)[0]) {
    activeDiscount.removeClass('active').slideUp();
  }
  $('.jumpDiv p').remove();
  var discount = Math.floor((Math.random() * 5) + 5);
  var msg = '<p>Your discount is ' + discount + '%</p>';
  $(this).children('.discountDiv').append(msg);
  $(this).children('.discountDiv').slideDown().addClass('active');
});
＆＃13; 
.jumpDiv {
  float: left;
}

#main {
  border: 1px solid;
  height: 500px;
  width: auto;
  background-color: grey;
}

#main .jumpDiv {
  border-right: 1px solid;
  border-bottom: 1px solid;
  height: 245px;
  width: 245px;
  font-size: 20px;
}

#main .jumpDiv>div {
  text-align: center;
  background-color: #fee;
  cursor: pointer;
}

.discountDiv {
  text-align: center;
  display: none;
  border: 1px solid;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
  <div id="main">
    <div class="jumpDiv">
      <div> Click Here</div>
      <div class="discountDiv">

      </div>
    </div>
    <div class="jumpDiv">
      <div> Click Here</div>
      <div class="discountDiv">

      </div>
    </div>
    <div class="jumpDiv">
      <div> Click Here</div>
      <div class="discountDiv">

      </div>
    </div>
    <div class="jumpDiv">
      <div> Click Here</div>
      <div class="discountDiv">

      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

您可以比较DOM对象并检查何时单击同一元素两次，尝试此工作示例：

＆＃13;
＆＃13; 
var previousTarget=null;
$('.jumpDiv').click(function () {
    previousTarget=this;
    if(this===previousTarget) {
        $('.jumpDiv p').remove();
        var discount = Math.floor((Math.random() * 5) + 5);
        var msg = '<p>Your discount is ' + discount + '%</p>';
        $(this).children('.discountDiv').append(msg);
        $(this).children('.discountDiv').slideDown();
    }
    else {
       $('.jumpDiv').children('.discountDiv').slideUp();
    }
    return false;
});
＆＃13; 
.jumpDiv{
    float:left;
}
#main{
    border:1px solid;
    height:500px;
    width:auto;
    background-color: grey;
}
 #main .jumpDiv{
    border-right: 1px solid;
    border-bottom: 1px solid;
    height:245px;
    width:245px;
    font-size:20px;
}
#main .jumpDiv>div{
    text-align:center;
    background-color:#fee;
    cursor: pointer;
    
}
.discountDiv{
    text-align: center;
    display:none;
    border:1px solid;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    
}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
<div id="main">
            <div class="jumpDiv">
                <div> Click Here</div>
                <div class="discountDiv">

                </div>
            </div>
            <div class="jumpDiv">
                <div> Click Here</div>
                <div class="discountDiv">

                </div>
            </div>
            <div class="jumpDiv">
                <div> Click Here</div>
                <div class="discountDiv">

                </div>
            </div>
            <div class="jumpDiv">
                <div> Click Here</div>
                <div class="discountDiv">

                </div>
            </div>
        </div>
        <script
			  src="https://code.jquery.com/jquery-3.2.1.js"
			  integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
			  crossorigin="anonymous"></script>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

您可以将类添加到活动标签。然后检查它是否已经打开。

以下是jsFiddle：https://jsfiddle.net/bf1tmxsw/

答案 5 :(得分：0)

只需使用以下代码检查当前事件触发器：

$('.jumpDiv').click(function () {
     var discount = Math.floor((Math.random() * 5) + 5);
     var msg = '<p>Your discount is ' + discount + '%</p>';
     $(this).children('.discountDiv').append(msg);

     if($(this).children('.discountDiv').css('display') === 'none'){
         $('.jumpDiv').children('.discountDiv').slideUp();
         $('.jumpDiv p').remove();
         $(this).children('.discountDiv').slideDown();
     }
});

答案 6 :(得分：0)

尽可能简化JS Fiddle。

您可以在此处详细了解.on()或.html()

现在，如果您需要存储最后点击的ID，您可以使用Cookie或localStorage。

相关问题
最新问题