JQuery的从兄弟姐妹的元件

Question

每行有3个图像，但是那些3个图像中的一个中移除类有一个类活性。

.active{border: 1px solid red;} 

活动图像有边框（按类活动）。两幅图像NP边界（类空）

所有我想要的，从的onclick当前活动图像删除边框，并添加到被点击的一个。

我尝试了所有这些都不工作：

$('#' + clkdImgId + ' img').parent().children('.active').removeClass('active'); // fails; 
$('#' + clkdImgId + ' img').siblings().find("img.active").hide(); //fails 
$('#' + clkdImgId + ' img').closest('.active').removeClass('active');//fails 
$('#' + clkdImgId + ' img').closest('.image').children('.active').hide();//fails 
$('#' + clkdImgId + ' img').closest('img.active').removeClass('active');//fails 
$('#' + clkdImgId + ' img').closest('.active').hide();//fails 


function setBrder(rowId, imgId) 
{ 
    var clkdImgId = 'img' + rowId + imgId;//this gives me img12, img13 etc correctly 

    //set class on the clicked 
    $('#' + clkdImgId + ' img').addClass('active');// this works 

$('#' + clkdImgId + ' img').parent().children('.active').removeClass('active'); // fails; 
    $('#' + clkdImgId + ' img').siblings().find("img.active").hide(); //fails 
    $('#' + clkdImgId + ' img').closest('.active').removeClass('active');//fails 
    $('#' + clkdImgId + ' img').closest('.image').children('.active').hide();//fails 
    $('#' + clkdImgId + ' img').closest('img.active').removeClass('active');//fails 
    $('#' + clkdImgId + ' img').closest('.active').hide();//fails 

} 


HTMLs: 

<table><tr><td> 
         <div id="img11" class="image"> 
          <img class="active" src=".."> <- REMOVE this .active 
         </div> 
         <div id="img12" class="image"> 
          <img class="" src="..">  <- ADD HERE IF THIS CLICKED 
          <div onclick="setBrder('1', 2);" class="overlay">Set</div> 
         </div> 
         <div id="img13" class="image"> 
          <img class="" src=".."> 
           <div onclick="setBrder('1', 3);" class="overlay">Set</div> 
         </div> 
        </td></tr> 
    <tr><td> 
         <div id="img11" class="image"> 
          <img class="" src=".."> 
          <div onclick="setBrder('2', 1);" class="overlay">Set</div> 
         </div> 
         <div id="img12" class="image"> 
          <img class="active" src="..">       
         </div> 
         <div id="img13" class="image"> 
          <img class="" src=".."> 
           <div onclick="setBrder('2', 3);" class="overlay">Set</div> 
         </div> 
        </td></tr> 

Answer 1

貌似clkdImgId是div元素的ID，所以你需要找到clkdImgId元素

的兄弟元素中的 img元素

$('#' + clkdImgId).siblings().find('img').removeClass('active'); 

演示：Fiddle

Answer 2

清除所有活动类，然后将其添加到您单击的一个：

$('.overlay').on('click', function() { 
     $('img').removeClass("active"); 
     $(this).parent().find('img').addClass("active"); 
}); 

Answer 3

试试这个，你可以删除所有活动类，然后添加类当前点击的元素

$(document).on('click','.image',function(){ 
    $(this).parent().find('img').removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 4

你不”吨需要有一个复杂的结构和冗余代码这样的，只是这样做：

HTML

<table> 
<tr> 
    <td> 
     <div id="img11" class="image"> 
      <img class="active" src=".."/> 
     </div> 
     <div id="img12" class="image"> 
      <img class="" src=".."/> 
      <div class="overlay"> 
       Set 
      </div> 
     </div> 
     <div id="img13" class="image"> 
      <img class="" src=".."/> 
      <div class="overlay"> 
       Set 
      </div> 
     </div> 
    </td> 
</tr> 
<tr> 
    <td> 
     <div id="img11" class="image"> 
      <img class="" src=".."/> 
      <div class="overlay"> 
       Set 
      </div> 
     </div> 
     <div id="img12" class="image"> 
      <img class="active" src=".."/> 
     </div> 
     <div id="img13" class="image /"> 
      <img class="" src=".."/> 
      <div class="overlay"> 
       Set 
      </div> 
     </div> 
    </td> 
</tr> 
</table> 

jQuery的

$('.overlay').click(function() { 
    $('.image img').removeClass('active'); 
    $(this).prev().addClass('active'); 
}) 

Updated Fiddle