jQuery - 选择与 'clicked' 元素相同类别的元素

Question

我有几个具有相同类名和相同内容的 DIV，它们将在单击事件中显示。如何在 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。