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