javascript - 仅显示一个 DIV 在具有相同类 jQuery 的单击事件上打开

Question

我有两张 ID 不同但类名相同的 Bootstrap 卡。我想选择打开和关闭元素，而不必为每个 ID 名称编写不同的函数。而是通过 $(this) 关键字或其他替代方法打开和关闭 Hidden Div 的类 .card-reveal 和 .close。任何帮助，将不胜感激。谢谢。 CodePen 链接:https://codepen.io/Corsurath/pen/eYYoZRV

$(function() {

  $('#show').on('click', function() {
    $('.show1').slideToggle('slow');
  });

  $('.show1 .close').on('click', function() {
    $('.show1').slideToggle('slow');
  });
});

$(function() {
  $('#show2').on('click', function() {
    $('.show2').slideToggle('slow');
  });

  $('.show2 .close').on('click', function() {
    $('.show2').slideToggle('slow');
  });
});

/*$(function(){
$('#show').on('click', function(){        
    $('.card-reveal').slideToggle('slow');
});

$('.card-reveal .close').on('click',function(){
   $('.card-reveal').slideToggle('slow');
});
});*/

.card .card-image{

    overflow: hidden;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.card .card-image img{
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.card .card-image:hover img{
    -webkit-transform: scale(1.2) rotate(-7deg);
    -moz-transform: scale(1.2) rotate(-7deg);
    -ms-transform: scale(1.2) rotate(-7deg);
    -o-transform: scale(1.2) rotate(-7deg);
    transform: scale(1.2) rotate(-7deg);
}

.card{
    font-family: 'Roboto', sans-serif; 
    border:none;
    margin-top: 10px;
    position: relative;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.card .card-content {
    padding: 10px;   
    background:#1A9AE1;
    color:white;
}

.card .card-content .card-title, .card-reveal .card-title{
    font-size: 24px;
    font-weight: 200;    
}

.card .card-reveal{    
    padding: 20px;
    position: absolute;
    background-color: #FFF;
    width: 100%;
    overflow-y: auto;
    /*top: 0;*/
    left:0;
    bottom:0;
    height: 100%;
    z-index: 1;
    display: none;    
}

.card .card-reveal p{
    color: rgba(0, 0, 0, 0.71);
    margin:20px ;
}

.btn-custom{
 background-color: transparent;
 font-size:18px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">    
    <div class="col-lg-6">
      <div class="card">
        <div class="card-image">
          <div class="wrap">
            <img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg">
          </div><!-- card image -->
        </div> 
        <div class="card-content bg-light text-dark">
          <span class="card-title">Some Title</span>               
          <button type="button" id="show" class="show btn btn-custom pull-right" aria-label="Left Align">
            <i class="fa fa-ellipsis-v"></i>
          </button>
        </div><!-- card content -->

        <div class="card-reveal show1">
          <span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
          <p>Here is some more information about this product that is only revealed once clicked on.</p>
        </div><!-- card reveal -->
      </div>
    </div>
    <div class="col-lg-6">
      <div class="card">
        <div class="card-image">
          <div class="wrap">
            <img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg">
          </div><!-- card image -->
        </div> 
        <div class="card-content bg-light text-dark">
          <span class="card-title">Some Title</span>               
          <button type="button" id="show2" class="show btn btn-custom pull-right" aria-label="Left Align">
            <i class="fa fa-ellipsis-v"></i>
          </button>
        </div><!-- card content -->
        <div class="card-reveal show2">
          <span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
          <p>Here is some more information about this product that is only revealed once clicked on.</p>
        </div><!-- card reveal -->
      </div>
    </div>
  </div>
</div>

Answer 1

为了使其更健壮，您可以为单击的元素分配一个属性，并使用它来定位您想要显示的内容。

为此，我将使用类 show1/show2在你的card-reveal div 作为目标，并使用属性 data-target在按钮上，然后使用 jQuery 来匹配 data-target到 card-reveal .

HTML5 中的属性可以任意命名，但最佳做法是使用 data-custom-name .

<button type="button" id="show1"...变成 <button type="button" id="show1" data-target="show1" (您真的不再需要 ID)。

然后您的 jQuery 代码将在点击时查找您的目标并切换它。

我还为关闭按钮添加了一个功能，你可以删除data-dismiss="modal"因为这是一个用于关闭引导模式的引导属性，在这里没有任何作用。

我从你的代码笔链接中获取了大部分内容(不得不从你的链接中删除 ][1])

jQuery(document).ready(function($) { //you should have one of these in your code already
  $('.show').click(function(){ //same as on('click', function(){}); I just prefer this syntax
    var target = $(this).attr('data-target'); //this will be card1 if the first is clicked.
    $('.'+target).slideToggle('slow'); //add . for class selector and use the target variable to find the right element
  });

  $('.close').click(function(){ //close button
    $(this).parent().slideToggle('slow'); //find the nearest parent and close it
  });

});

@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
.card .card-image{

    overflow: hidden;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.card .card-image img{
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -ms-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.card .card-image:hover img{
    -webkit-transform: scale(1.2) rotate(-7deg);
    -moz-transform: scale(1.2) rotate(-7deg);
    -ms-transform: scale(1.2) rotate(-7deg);
    -o-transform: scale(1.2) rotate(-7deg);
    transform: scale(1.2) rotate(-7deg);
}

.card{
    font-family: 'Roboto', sans-serif; 
  border:none;
    margin-top: 10px;
    position: relative;
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 4 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.card .card-content {
    padding: 10px;   
  background:#1A9AE1;
  color:white;
}

.card .card-content .card-title, .card-reveal .card-title{
    font-size: 24px;
    font-weight: 200;    
}

.card .card-reveal{    
    padding: 20px;
    position: absolute;
    background-color: #FFF;
    width: 100%;
    overflow-y: auto;
    /*top: 0;*/
    left:0;
    bottom:0;
    height: 100%;
    z-index: 1;
    display: none;    
}

.card .card-reveal p{
    color: rgba(0, 0, 0, 0.71);
    margin:20px ;
}

.btn-custom{
   background-color: transparent;
    font-size:18px;
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row">    
        <div class="col-lg-6">
            <div class="card">
                <div class="card-image">
                  <div class="wrap">
                    <img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg">
                    
                </div><!-- card image -->
               </div> 
                <div class="card-content bg-light text-dark">
                  <span class="card-title">Some Title</span>               
                   <button type="button" id="show" data-target="show1" class="show btn btn-custom pull-right" aria-label="Left Align">
                        <i class="fa fa-ellipsis-v"></i>
                     </button>
                </div><!-- card content -->
            
                <div class="card-reveal show1">
                    <span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <p>Here is some more information about this product that is only revealed once clicked on.</p>
                </div><!-- card reveal -->
            </div>
        </div>
      
      
      
      
              <div class="col-lg-6">
            <div class="card">
                <div class="card-image">
                  <div class="wrap">
                    <img class="img-fluid" src="https://i.imgur.com/4UOcPM2.jpg">
                    
                </div><!-- card image -->
               </div> 
                <div class="card-content bg-light text-dark">
                  <span class="card-title">Some Title</span>               
                   <button type="button" id="show2" data-target="show2" class="show btn btn-custom pull-right" aria-label="Left Align">
                        <i class="fa fa-ellipsis-v"></i>
                     </button>
                </div><!-- card content -->
            
                <div class="card-reveal show2">
                    <span class="card-title">Card Title</span> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <p>Here is some more information about this product that is only revealed once clicked on.</p>
                </div><!-- card reveal -->
            </div>
        </div>
   
    </div>
</div>