Javascript/Jquery—以最近的相关块为目标，以显示类似卡片流中的内容

我有一套卡片。这是你的电话号码。 即使我在演示中只放了3张卡，但在真正的应用程序中，我有无限多张if卡

当您将鼠标悬停在第一张卡上，然后单击出现的“加号”图标时，一块信息会覆盖整个卡并显示该卡的特定信息。 我没有做到的是：当用户点击任何卡的“加号”图标时，比如第二张、第三张……用户应该会看到这张卡的信息出现（就像第一张卡一样）

约束：

我确实可以为每张卡片输入一个数字，比如id“#card345”、“#card567”等等，然后使用javascript将这个变量id放入javascript脚本中，只针对这个id号。 出于性能原因，我不想这样做，也就是说，不要在javascript代码中使用任何变量，例如卡的id。并且只使用jquery/javascript代码以“最近的”块为目标进行显示。我听说过“最近的”或next（），但我没有做到。我对任何css或javascript/jquery解决方案都持开放态度

代码

HTML

JS

为什么不使用最近的（）函数

文件

差不多

$("#plusbutton").click(function(e){
   $(e.target).closest('.card').find('.info-overlay').show();
}

除了代码之外，我强烈建议您不要使用ID，而是使用类作为元素名称，因为它们不是唯一的

另外，出于相反的原因，不要将卡ID用作类：在此处使用ID（如果您确实需要卡ID）。记住，你不应该只使用数字。最好是这样：

id=“card-353”

看一看:

我刚刚编辑了你的小提琴，如果我理解你的问题，现在它可以正常工作了

---

不过，请清理您的html代码：）

元素的ID必须是唯一的，因此使用

info overlay

和

plusbutton

作为类

$（“.card image”）.hoverIntent({
灵敏度：100，//灵敏度阈值（必须为1或更高）
间隔：100，//onMouseOver轮询间隔的毫秒数
超时：100，//onMouseOut之前延迟毫秒
结束：函数（）{
$（'.card short info'，此）.slideToggle（100）；
},
输出：函数（）{
$（'.card short info'，this）.slideToggle（300）；
}
});
$（“.close overlay”）。单击（函数（e）{
e、 预防默认值（）；
$（this）.closest（“.card content”）.find（“.info overlay”）.hide（）；
});
$（“.plusbutton”）。单击（函数（e）{
e、 预防默认值（）；
$（this）.closest（“.card content”）.find（“.info overlay”）.show（）；
});
.info覆盖{
显示：无；
z指数：999；
位置：绝对位置；
身高：100%；
宽度：100%；
背景颜色：灰色；
}
.闭合覆盖{
浮动：对；
填充物：5px；
}
#交易区{
边缘顶部：20px；
}
#交易区ul{
填充：0；
}
.卡片清单{
列表样式：无；
显示：块；
高度：自动；
}
.卡片{
宽度：47%；
显示：内联块；
利润率：01%21px1%；
}
.卡片内容{
背景：#fff；
位置：相对位置；
}
.卡片图像{
垂直对齐：顶部；
位置：相对位置；
线高：0；
溢出：隐藏；
垫底：33.88%；
}
.卡图像img{
宽度：100%；
身高：100%；
位置：绝对位置；
排名：0；
左：0；
颜色：红色；
}
.集装箱{
左侧填充：0px；
右边填充：0px；
}
.卡短信息{
宽度：100%；
身高：13%；
位置：绝对位置；
颜色：#464650；
填充：0px1em；
字号：0.8em；
背景颜色：灰色；
底部：0；
显示：无；
}
.moreInfo{
位置：相对位置；
最高：50%；
-webkit转换：translateY（-50%）；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
浮动：对；
字体大小：16px；
线高：正常；
颜色：#464650；
}
.简短信息内容{
位置：相对位置；
最高：50%；
-webkit转换：translateY（-50%）；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
文本对齐：左对齐；
}
.卡短信息a.日期销售{
颜色：#464650；
}
.卡长信息{
宽度：100%；
身高：100%；
位置：绝对位置；
颜色：#464650；
填充：0px1em；
字号：0.8em；
背景颜色：灰色；
底部：0；
显示：无；
}



这是我想要的第三张卡的重要细节


我认为这是因为使用了多个
plusbutton
id。是的，我知道。如何在无限nb上仅显示relevamt卡信息如果卡是我问题的目的，则无论显示的卡数多少，它都应该有效。
#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;    
}

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

});

$("#plusbutton").click(function(e){
   $(e.target).closest('.card').find('.info-overlay').show();
}