Javascript/Jquery - 定位最接近的相关 block 以在类似卡片流中显示内容

Question

我有一套卡片。这是 DEMO .即使我在演示中只放了 3 张卡片，但如果在真实应用程序中放置了无限数量的卡片。

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

约束:

我确实可以为每张卡输入一个编号，例如 id“#card345”、“#card567”等，然后使用 javascript 将此变量 id 放入 javascript 脚本中以仅针对此 id 编号。出于性能原因，我不想这样做，也就是说在 javascript 代码中不使用任何变量，例如卡的 id。并且只使用 jquery/javascript 代码来定位要显示的“最近” block 。我听说过“最接近”或 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();

});

Answer 1

元素的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>