Question

每行有3张图片，但这3张图片中有一张图片有效。

.active{border: 1px solid red;}

活动图像周围有边框（按类激活）。两个图像有np边框（类为空）

我想要的一切，点击从当前活动图像中删除边框并添加到单击的边框。

我尝试过所有这些都没有用过：

$('#' + 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

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

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

Answer 2

试试这个，您可以删除所有活动类，然后将类添加到当前单击元素

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

Answer 3

看起来clkdImgId是div元素的ID，因此您需要在img元素的兄弟元素中找到clkdImgId元素

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

演示：Fiddle

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

JQuery从兄弟元素中删除类

4 个答案: