Question

我有几个具有相同类名和相同内容的DIV将在click事件中显示。如何在JQuery中执行此操作？我的意思是当我点击框时，内容仅显示在此框中，而不显示在其他框中。

到目前为止，这是我的代码。

$(document).ready(function() {
   // Catch all clicks on a link with the class 'link'
$('.category-item-image').click(function(e) {
    // Stop the link being followed:
    e.preventDefault();
    // Get the div to be shown:
    var confirmdelete = $('.overaly').attr('class');
         // Remove any active classes:

    // Add the 'active' class to this link:
    // replace this line //$(this).addClass('active');
    $('div.' + confirmdelete).addClass( "checked" );
});
});

我的CSS：

.caterory{
  position: relative;
  width: 100%;
}


.category-content{
  position: relative;
  width: 55%;
  margin: 0 auto;
}


.category-about{
  text-align: center;

}

.category-about h1{
  font-family: 'gothamrnd-light';
  font-size: 2.5rem;
  font-weight: 100;
}

.category-about p{
  font-family: 'open sans';
  font-size: 1.5rem;
  font-weight: 100;
}

.category-content-image{

list-style: none;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  justify-content: space-between;
}

.category-item{
  width: 250px;
  height:150px;
  margin: 11px 0;
}

.category-item-image{
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 5px;
  text-align: center;
  cursor: pointer; 
}


.category-item-image a{
  position: absolute;
  text-decoration: none;
  color: #000;
  width: 148px;
  height: 38px;
  line-height: 36px;
  left: 50%;
  margin-left: -74px;
  top: 50%;
  margin-top: -15px;
  padding: 0 20px;
  background-color: #fff;
}

.checked-box{
  position: absolute;
  width: 40px;
  height: 100%;
  background-color: #14C573;
  right: 0;
  top: 0;
  opacity: 0;
}

.checked-box span{
    position: absolute;
    text-align: left;
    top: 50%;
    margin-top: -15px;
    left: 50%;
    margin-left: -15px;
}


.overaly{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:rgba(8, 45, 47, 0.61);
  border-radius: 5px;
  opacity: 0;
}
.overaly.checked,.checked-box.checked{
  opacity: 1;
}

<div class="category-content-image">
           <div class="category-item">
               <div class="category-item-image" style="background-image:url('img/eksploro-1.jpg');">
                 <div class="overaly"></div>
                   <a href="#">politike <div class="checked-box"><span><svg class="check-mark" width="30" height="30" viewBox="0 0 50 50" stroke="#FFF" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0"><circle cx="25" cy="25" r="18" stroke-width="3" stroke="#FFF" fill="transparent" transform="translate(0, -1.1)" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.0"></circle><path d="M15.5771484 24.2 L21.8244978 32 L33.3138951 14.4" fill="transparent" stroke-width="3" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.1"></path></svg></span></div> </a>
               </div>
           </div>
            <div class="category-item">
               <div class="category-item-image" style="background-image:url('img/eksploro-1.jpg');">
                   <div class="overaly"></div>
                   <a href="#">politike <div class="checked-box"><span><svg class="check-mark" width="30" height="30" viewBox="0 0 50 50" stroke="#FFF" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0"><circle cx="25" cy="25" r="18" stroke-width="3" stroke="#FFF" fill="transparent" transform="translate(0, -1.1)" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.0"></circle><path d="M15.5771484 24.2 L21.8244978 32 L33.3138951 14.4" fill="transparent" stroke-width="3" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.1"></path></svg></span></div> </a>
               </div>
           </div> 
  </div>

Answer 1

我认为这就是你想要的。 https://jsfiddle.net/26L6oxss/3/
的添加

$( ".category-item-image" ).click(function() { $(this).find('.overaly,.checked-box').toggleClass( "checked" ); });

我做的是

我使用this来引用所点击的项目。

之后使用find在该特定点击项目中查找课程.overaly,.checked-box。

Answer 2

为什么你没有使用 id ？将每个.category-item-image分类的div赋予一个id。使用id的目的是识别HTML文件中的元素，你想做同样的事情吗？

<div class="category-content-image">
           <div class="category-item">
               <div class="category-item-image" id="item1" style="background-image:url('http://media4.popsugar-assets.com/files/2014/10/24/949/n/1922153/b5127c054bd2462c_thumb_temp_cover_file23876211414179494.xxxlarge/i/Taylor-Swift-Beauty-Tips-Tricks.jpg');">
                 <div class="overaly"></div>
                   <a href="#">politike <div class="checked-box"><span><svg class="check-mark" width="30" height="30" viewBox="0 0 50 50" stroke="#FFF" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0"><circle cx="25" cy="25" r="18" stroke-width="3" stroke="#FFF" fill="transparent" transform="translate(0, -1.1)" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.0"></circle><path d="M15.5771484 24.2 L21.8244978 32 L33.3138951 14.4" fill="transparent" stroke-width="3" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.1"></path></svg></span></div> </a>
               </div>
           </div>
            <div class="category-item">
               <div class="category-item-image" id="item2" style="background-image:url('http://media4.popsugar-assets.com/files/2014/10/24/949/n/1922153/b5127c054bd2462c_thumb_temp_cover_file23876211414179494.xxxlarge/i/Taylor-Swift-Beauty-Tips-Tricks.jpg');">
                   <div class="overaly"></div>
                   <a href="#">politike <div class="checked-box"><span><svg class="check-mark" width="30" height="30" viewBox="0 0 50 50" stroke="#FFF" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0"><circle cx="25" cy="25" r="18" stroke-width="3" stroke="#FFF" fill="transparent" transform="translate(0, -1.1)" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.0"></circle><path d="M15.5771484 24.2 L21.8244978 32 L33.3138951 14.4" fill="transparent" stroke-width="3" data-reactid=".0.4.$/picker.0.4:$Popular Topics.1.$flipboard/topic%2Fdiets.0.2.0.1"></path></svg></span></div> </a>
               </div>
           </div> 
  </div>

然后，您可以通过获取点击元素的ID来接近点击的元素，如下所示：

$( ".category-item-image" ).click(function() {
  $('.category-item-image').children('.overaly,.checked-box').removeClass( "checked" );
  $('#' + this.id).children('.overaly,.checked-box').addClass( "checked" );//this.id is the id of clicked element
});

以下是jsfiddle链接：https://jsfiddle.net/26L6oxss/5/

Answer 3

您应该使用this来仅显示所点击的项目，而不是其他项目（如代码的注释部分所示）。

$('.category-item-image').click(function(e) {
    // Stop the link being followed:
    e.preventDefault();

    //remove the 'checked' class to all divs
    // or .hide()
    $('.category-item-image').removeClass('checked');

    // Add the 'active' class to this link only   
    // or .show() 
    $(this).addClass( "checked" );
});

如果您只想显示/隐藏过度类，请使用children（）函数。

jQuery - 选择与“clicked”项

3 个答案: