1. 首页
  2. 问答
  3. jQuery - 找到最后选定的元素

jQuery - 找到最后选定的元素

2017-10-09 79 views
1

我正在学习Head First系列中的jQuery，并在其中一个例子上工作，我需要找到最后选定的元素。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 
 
\t \t \t src="https://code.jquery.com/jquery-3.2.1.js" 
 
\t \t \t integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
 
\t \t \t crossorigin="anonymous"></script> 
 
</body>

我需要删除的毛刺，如果用户点击同一div反复，打折消息的div应该保持原样，并且只更新随机生成的内容。如果用户再次点击了相同的div，我该如何阻止这个div滑动回来。有没有办法访问最后点击的元素，并以某种方式停止折扣消息，以便在更新消息之前进行备份。

来源

2017-10-09 Mani Malhotra

回答

2

你”将不得不存储对实体的引用并将其与w进行比较ith下一次点击的价值，如果它是一样的，不要做任何事情。看看下面的内容。

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; 
 
});
.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 
 
\t \t \t src="https://code.jquery.com/jquery-3.2.1.js" 
 
\t \t \t integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
 
\t \t \t crossorigin="anonymous"></script> 
 
</body>

来源

2017-10-09 11:56:37 11thdimension

+0

感谢11thdimension，我一直在想同样的观点，但并没有想出如何执行这个想法...此外，你的解决方案有一个更好，更合适的版本，我原来计划...感谢束... –

+0

不客气！ – 11thdimension

0

我已经用一个类来确定哪一个是开放的。然后测试一下我们即将关闭的那个与我们想要打开的那个是否一样，并且只有在这个不一样时才关闭它。

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

来源

2017-10-09 11:49:32 Salketer

0

您可以比较DOM对象和检查，当你点击两次相同的元素，试试这个工作示例：

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; 
 
});
.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 
 
\t \t \t src="https://code.jquery.com/jquery-3.2.1.js" 
 
\t \t \t integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
 
\t \t \t crossorigin="anonymous"></script> 
 
</body>

来源

2017-10-09 11:55:01 SilverSurfer

0

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

这里是jsFiddle：https://jsfiddle.net/bf1tmxsw/

来源

2017-10-09 11:59:37

+0

解决此问题的代码应该包含在您的答案中，而不仅仅是链接到的答案中，也可以使用编辑器中的Stack Snippet按钮来解答可运行的代码。至于你的实际解决方案，你的例子仍然隐藏折扣消息，这是OP试图阻止的第二次点击。 –

+0

哦，我以为这是一个练习代码。我应该展示一些更好的功能。 –

+0

我无法理解，为什么有必要在代码段中添加答案。 Jsfiddle通过更好的代码隔离来做同样的事情（就我所知）。所以添加链接对我来说似乎很好。虽然我会继续考虑堆栈片段，并会在将来尝试使用它。 :) –

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(); 
    } 
});

来源

2017-10-09 12:02:13 ykaragol

+1

注意OP仍然想要改变折扣区域的内容，即使它不隐藏：_“折扣消息div应该保持原样，只需更新随机生成的内容“_ –

+0

谢谢！我更新了代码。 – ykaragol

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();  
});

演示

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

来源

2017-10-09 12:03:53

0

发了JS Fiddle尽可能简单。

在这里，你可以阅读更多有关.on()或约.html()

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

来源

2017-10-09 13:32:25 Tibix

相关问题

 相关问题