Javascript/Jquery-以最接近的相关块为目标，显示类似卡片流中的内容
Javascript/Jquery - Target closest relevant block to show content in a stream of similar cards
我有一套卡片。这是演示。即使我在演示中只放了3张卡，我在真正的应用程序中也有无限多的if卡。
当你将鼠标悬停在第一张卡上，然后单击出现的"加号"图标时，一块信息会覆盖整张卡，并显示该卡的特定信息。我无法做到的是：当用户点击任何卡片的"加号"图标时，比如第二张、第三张。。。用户应该看到这张卡的信息出现（就像第一张卡一样）。
约束：
我确实可以为每张卡放一个数字，比如id"#card345"、"#card567"等等，并使用javascript将这个变量id放在javascript脚本中，只针对这个id编号。出于性能原因，我不想这样做，也就是说，不要在javascript代码中使用任何VARIABLE，例如卡的id。并且只使用jquery/javascript代码来针对要显示的"最近的"块。我听说过"最接近"或next（），但我没能做到。我对任何css或javascript/jquery解决方案都持开放态度。
代码
HTML
<div class="center jumbotron">
<div id="deal-zone">
<ul class="cards-list">
<li class="card 353">
<div class="card-content">
<div id="info-overlay">
<div class="close-overlay">
<a>close</a>
</div>
some info some longer info and this is really long now i wonder how long it can get
</div>
<div class="card-image">
<a href="/operations/thisiscool"></a>
<figure>
<a href="/operations/thisiscool">
<img style="opacity: 1; display: block;" id="HPImageBanner_353" src="http://vp-eu.scene7.com/is/image/vpeu/0/00_54093_FR_brandvisualnbrandvisualfr">
<!-- operation card's short details on 2-column view-->
</a>
<figcaption id="tek" class="card-short-info">
<a href="/operations/la-semaine-de-la-beaute-a-paris-111"></a>
<a class="moreInfo" id="BtnHomeOperationExpand_5331345" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i id="plusbutton" class="glyphicon glyphicon-plus detail-icon_353"></i>
</a>
<div class="short-info-content">
<a id="dateSales_53120" class="dateSales _saleLink" href="/operations/la-semaine-de-la-beaute-a-paris-111">Jusqu'au <span class="outstandingwords">12 novembrex</span></a>
</div>
</figcaption>
</figure>
</div>
</div>
<div id="collapseTwo" class="collapse left-aligned" role="tabpanel" aria-labelledby="headingTwo">
<div class="infoSales">
<a id="info" class="moreInfo"></a>
this is the big details i want
</div>
</div>
</li>
<!-- cards in the stream of deal -->
<li class="card 354">
<div class="card-content">
<div id="info-overlay">
<div class="close-overlay">
<a>close</a>
</div>
some info some longer info and this is really long now i wonder how long it can get
</div>
<div class="card-image">
<a href="/operations/thisiscool"></a>
<figure>
<a href="/operations/thisiscool">
<img style="opacity: 1; display: block;" id="HPImageBanner_353" src="http://vp-eu.scene7.com/is/image/vpeu/5/00_51449_FR_brandvisualnbrandvisualfr">
<!-- operation card's short details on 2-column view-->
</a>
<figcaption id="tek" class="card-short-info">
<a href="/operations/la-semaine-de-la-beaute-a-paris-111"></a>
<a class="moreInfo" id="BtnHomeOperationExpand_5331345" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i id="plusbutton" class="glyphicon glyphicon-plus detail-icon_353"></i>
</a>
<div class="short-info-content">
<a id="dateSales_53120" class="dateSales _saleLink" href="/operations/la-semaine-de-la-beaute-a-paris-111">Jusqu'au <span class="outstandingwords">12 novembrex</span></a>
</div>
</figcaption>
</figure>
</div>
</div>
<div id="collapseTwo" class="collapse left-aligned" role="tabpanel" aria-labelledby="headingTwo">
<div class="infoSales">
<a id="info" class="moreInfo"></a>
this is the big details for the second card number i want
</div>
</div>
</li>
<li class="card 355">
<div class="card-content">
<div id="info-overlay">
<div class="close-overlay">
<a>close</a>
</div>
some info some longer info and this is really long now i wonder how long it can get
</div>
<div class="card-image">
<a href="/operations/thisiscool"></a>
<figure>
<a href="/operations/thisiscool">
<img style="opacity: 1; display: block;" id="HPImageBanner_353" src="http://vp-eu.scene7.com/is/image/vpeu/1/00_53818_FR_brandvisualnbrandvisualfr">
<!-- operation card's short details on 2-column view-->
</a>
<figcaption id="tek" class="card-short-info">
<a href="/operations/la-semaine-de-la-beaute-a-paris-111"></a>
<a class="moreInfo" id="BtnHomeOperationExpand_5331345" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i id="plusbutton" class="glyphicon glyphicon-plus detail-icon_353"></i>
</a>
<div class="short-info-content">
<a id="dateSales_53120" class="dateSales _saleLink" href="/operations/la-semaine-de-la-beaute-a-paris-111">Jusqu'au <span class="outstandingwords">12 novembrex</span></a>
</div>
</figcaption>
</figure>
</div>
</div>
<div id="collapseTwo" class="collapse left-aligned" role="tabpanel" aria-labelledby="headingTwo">
<div class="infoSales">
<a id="info" class="moreInfo"></a>
this is the big details for the THIRd card i want
</div>
</div>
</li>
</ul>
</div>
</div>
CSS
#info-overlay {
display:none;
z-index:999;
position:absolute;
height:100%;
width:100%;
background-color:grey;
}
.close-overlay {
float:right;
padding:5px;
}
#deal-zone {
margin-top: 20px;
}
#deal-zone ul {
padding: 0;
}
.cards-list {
list-style: none;
display: block;
height: auto;
}
.card {
width: 47%;
display: inline-block;
margin: 0 1% 21px 1%;
}
.card-content {
background: #fff;
position: relative;
}
.card-image {
vertical-align: top;
position: relative;
line-height: 0;
overflow: hidden;
padding-bottom: 33.88%;
}
.card-image img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
color: red;
}
.container .jumbotron {
padding-left: 0px;
padding-right: 0px;
}
.card-short-info {
width: 100%;
height: 13%;
position: absolute;
color: #464650;
padding: 0px 1em;
font-size: 0.8em;
background-color: grey;
bottom:0;
display: none;
}
.moreInfo {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
float: right;
font-size: 16px;
line-height: normal;
color: #464650;
}
.short-info-content {
position:relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: left;
}
.card-short-info a.dateSales {
color: #464650;
}
.card-long-info {
width: 100%;
height: 100%;
position: absolute;
color: #464650;
padding: 0px 1em;
font-size: 0.8em;
background-color: grey;
bottom:0;
display: none;
}
JS-
$(".card-image").hoverIntent({
sensitivity:100,//sensitivity threshold (must be 1 or higher)
interval:100,//milliseconds for onMouseOver polling interval
timeout:100,//milliseconds delay before onMouseOut
over:function(){
$('.card-short-info',this).slideToggle(100);
},
out:function(){
$('.card-short-info',this).slideToggle(300);
}
});
$(".close-overlay").click(function(){
$("#info-overlay").hide();
});
$("#plusbutton").click(function(){
$("#info-overlay").show();
});
元素的ID必须是唯一的，因此使用info-overlay和plusbutton作为类
$(".card-image").hoverIntent({
sensitivity: 100, //sensitivity threshold (must be 1 or higher)
interval: 100, //milliseconds for onMouseOver polling interval
timeout: 100, //milliseconds delay before onMouseOut
over: function() {
$('.card-short-info', this).slideToggle(100);
},
out: function() {
$('.card-short-info', this).slideToggle(300);
}
});
$(".close-overlay").click(function(e) {
e.preventDefault();
$(this).closest('.card-content').find(".info-overlay").hide();
});
$(".plusbutton").click(function(e) {
e.preventDefault();
$(this).closest('.card-content').find(".info-overlay").show();
}); .info-overlay {
display: none;
z-index: 999;
position: absolute;
height: 100%;
width: 100%;
background-color: grey;
}
.close-overlay {
float: right;
padding: 5px;
}
#deal-zone {
margin-top: 20px;
}
#deal-zone ul {
padding: 0;
}
.cards-list {
list-style: none;
display: block;
height: auto;
}
.card {
width: 47%;
display: inline-block;
margin: 0 1% 21px 1%;
}
.card-content {
background: #fff;
position: relative;
}
.card-image {
vertical-align: top;
position: relative;
line-height: 0;
overflow: hidden;
padding-bottom: 33.88%;
}
.card-image img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
color: red;
}
.container .jumbotron {
padding-left: 0px;
padding-right: 0px;
}
.card-short-info {
width: 100%;
height: 13%;
position: absolute;
color: #464650;
padding: 0px 1em;
font-size: 0.8em;
background-color: grey;
bottom: 0;
display: none;
}
.moreInfo {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
float: right;
font-size: 16px;
line-height: normal;
color: #464650;
}
.short-info-content {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
text-align: left;
}
.card-short-info a.dateSales {
color: #464650;
}
.card-long-info {
width: 100%;
height: 100%;
position: absolute;
color: #464650;
padding: 0px 1em;
font-size: 0.8em;
background-color: grey;
bottom: 0;
display: none;
}<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.hoverintent/1.8.1/jquery.hoverIntent.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
<div class="center jumbotron">
<div id="deal-zone">
<ul class="cards-list">
<li class="card 353">
<div class="card-content">
<div class="info-overlay">
<div class="close-overlay">
<a>close</a>
</div>
some info some longer info and this is really long now i wonder how long it can get
</div>
<div class="card-image">
<a href="/operations/thisiscool"></a>
<figure>
<a href="/operations/thisiscool">
<img style="opacity: 1; display: block;" id="HPImageBanner_353" src="http://vp-eu.scene7.com/is/image/vpeu/0/00_54093_FR_brandvisualnbrandvisualfr">
<!-- operation card's short details on 2-column view-->
</a>
<figcaption id="tek" class="card-short-info">
<a href="/operations/la-semaine-de-la-beaute-a-paris-111"></a>
<a class="moreInfo" id="BtnHomeOperationExpand_5331345" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i class="plusbutton glyphicon glyphicon-plus detail-icon_353"></i>
</a>
<div class="short-info-content">
<a id="dateSales_53120" class="dateSales _saleLink" href="/operations/la-semaine-de-la-beaute-a-paris-111">Jusqu'au <span class="outstandingwords">12 novembrex</span></a>
</div>
</figcaption>
</figure>
</div>
</div>
<div id="collapseTwo" class="collapse left-aligned" role="tabpanel" aria-labelledby="headingTwo">
<div class="infoSales">
<a id="info" class="moreInfo"></a>
this is the big details i want
</div>
</div>
</li>
<!-- cards in the stream of deal -->
<li class="card 354">
<div class="card-content">
<div class="info-overlay">
<div class="close-overlay">
<a>close</a>
</div>
some info some longer info and this is really long now i wonder how long it can get
</div>
<div class="card-image">
<a href="/operations/thisiscool"></a>
<figure>
<a href="/operations/thisiscool">
<img style="opacity: 1; display: block;" id="HPImageBanner_353" src="http://vp-eu.scene7.com/is/image/vpeu/5/00_51449_FR_brandvisualnbrandvisualfr">
<!-- operation card's short details on 2-column view-->
</a>
<figcaption id="tek" class="card-short-info">
<a href="/operations/la-semaine-de-la-beaute-a-paris-111"></a>
<a class="moreInfo" id="BtnHomeOperationExpand_5331345" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i class="plusbutton glyphicon glyphicon-plus detail-icon_353"></i>
</a>
<div class="short-info-content">
<a id="dateSales_53120" class="dateSales _saleLink" href="/operations/la-semaine-de-la-beaute-a-paris-111">Jusqu'au <span class="outstandingwords">12 novembrex</span></a>
</div>
</figcaption>
</figure>
</div>
</div>
<div id="collapseTwo" class="collapse left-aligned" role="tabpanel" aria-labelledby="headingTwo">
<div class="infoSales">
<a id="info" class="moreInfo"></a>
this is the big details for the second card number i want
</div>
</div>
</li>
<li class="card 355">
<div class="card-content">
<div class="info-overlay">
<div class="close-overlay">
<a>close</a>
</div>
some info some longer info and this is really long now i wonder how long it can get
</div>
<div class="card-image">
<a href="/operations/thisiscool"></a>
<figure>
<a href="/operations/thisiscool">
<img style="opacity: 1; display: block;" id="HPImageBanner_353" src="http://vp-eu.scene7.com/is/image/vpeu/1/00_53818_FR_brandvisualnbrandvisualfr">
<!-- operation card's short details on 2-column view-->
</a>
<figcaption id="tek" class="card-short-info">
<a href="/operations/la-semaine-de-la-beaute-a-paris-111"></a>
<a class="moreInfo" id="BtnHomeOperationExpand_5331345" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i class="plusbutton glyphicon glyphicon-plus detail-icon_353"></i>
</a>
<div class="short-info-content">
<a id="dateSales_53120" class="dateSales _saleLink" href="/operations/la-semaine-de-la-beaute-a-paris-111">Jusqu'au <span class="outstandingwords">12 novembrex</span></a>
</div>
</figcaption>
</figure>
</div>
</div>
<div id="collapseTwo" class="collapse left-aligned" role="tabpanel" aria-labelledby="headingTwo">
<div class="infoSales">
<a id="info" class="moreInfo"></a>
this is the big details for the THIRd card i want
</div>
</div>
</li>
</ul>
</div>
</div>为什么不使用closest（）函数？
这是文件。
类似的东西
$("#plusbutton").click(function(e){
$(e.target).closest('.card').find('.info-overlay').show();
}
除了代码之外，我强烈建议您不要使用IDS，而是使用类作为元素名称，因为它们不是唯一的。
同样，出于相反的原因，不要将卡ID用作类：在这里使用ID（如果你真的需要卡ID）。记住，你不应该只使用数字。更好的是：id="card-353"
看看：
https://jsfiddle.net/58Ltod03/4/
我刚刚编辑了你的小提琴，如果我理解你的问题，现在它可以正常工作了。
尽管如此，请清理您的html代码：）
相关文章：
- 从桌面读取python文件时高亮显示代码
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- Javascript/Jquery-以最接近的相关块为目标，显示类似卡片流中的内容
- 突出显示定位点的目标元素内的元素
- location.href将鼠标悬停在链接上时，使目标显示在状态栏中
- onchange事件显示目标元素的所有文本值，原因
- 为什么我在谷歌分析中的漏斗显示为0，但目标显示的数字很高
- 我怎么能有一个iframe来显示目标页面及其所有内容's元素的比例为50%
- 中的模态正文中未显示引导模态目标内容
- 如何将不同的数据目标分配给不同的选项值，从而显示不同的模型
- 浏览器如何显示链接的目标url
- 如何在鼠标悬停文本中显示短url的目标页面的页面标题
- 如何确定访问者的入口页面?OR:我如何为不同的目标组显示不同的标题
- 如何在页面上显示两次时，没有任何唯一标识符的目标特定的html
- 如何在显示目标消息框之前隐藏所有以前的消息框
- 显示/隐藏js中的目标Div状态
- 显示悬停时的元素，使用第一元素ID作为目标第二元素的变量
- 具有Javascript功能的Href不显示“;将目标另存为“;单击鼠标右键
- 显示具有事件目标 ID 的块
- 如何在鼠标悬停时显示中间重定向链接的真实目标
