Question

我创建了一个jQuery代码，用于在单击图像时插入边框

<div class="span2">

        <div class="text"> 
            <div class="pull-left ">
                <div id="opt" class="btn">
                    <img  class='roller' src="http://thumbs.dreamstime.com/z/food-balanced-diet-form-circle-15460029.jpg">
                    <p>img1</p>
                </div>

                <div id="opt" class="btn">
                    <img class='roller' src="http://thumbs.dreamstime.com/z/food-balanced-diet-form-circle-15460029.jpg">
                    <p>img2</p>
                </div>

                <div id="opt" class="btn">
                    <img class='roller' src="http://thumbs.dreamstime.com/z/food-balanced-diet-form-circle-15460029.jpg">
                    <p>img3</p>
                </div>
            </div>
        </div>



        <div class="text"> 
            <div class="pull-left ">
                <div id="opt" class="btn">
                    <img class='roller' src="http://thumbs.dreamstime.com/z/food-balanced-diet-form-circle-15460029.jpg">
                    <p>1</p>
                </div>

                <div id="opt" class="btn">
                    <img class='roller' src="http://thumbs.dreamstime.com/z/food-balanced-diet-form-circle-15460029.jpg">
                    <p>2</p>
                </div>

                <div id="opt" class="btn">
                    <img class='roller' src="http://thumbs.dreamstime.com/z/food-balanced-diet-form-circle-15460029.jpg">
                    <p>3</p>
                </div>
            </div>
        </div>
</div>

我需要在用户点击其他图片后删除该边框。

我的代码：https://jsfiddle.net/abdL69uv/3/

Answer 1

您可以委派事件并使用以下逻辑：

$('.span12').on('click', '.roller:not(.highlight)', function (e) {
    $(e.delegateTarget).find('.roller.highlight').add(this).toggleClass('highlight');
});

-jsFiddle-

但公平地说，它应该仅在CSS中完成：

＆＃13;

.btn input[name=opt] {
    display: none;
}
.roller {
    border: 6px solid transparent;
}
.btn input[name=opt]:checked + .roller {
    border-radius: 50%;
    border-color: black;
    -webkit-transition: border-color 600ms;
    /* Safari */
    transition: border-color 600ms;
}
img {
    width:120px;
    height: 120px;
}

＆＃13;

<div class="span12">
    <div class="text">
        <div class="pull-left ">
            <div class="btn">
                <label>
                    <input type="radio" name="opt">
                    <img class='roller' src="http://thumbs.dreamstime.com/z/food-balanced-diet-form-circle-15460029.jpg">
                </label>
                <p>img1</p>
            </div>
            <div class="btn">
                <label>
                    <input type="radio" name="opt">
                    <img class='roller' src="http://thumbs.dreamstime.com/z/food-balanced-diet-form-circle-15460029.jpg">
                </label>
                <p>img2</p>
            </div>
            <div class="btn">
                <label>
                    <input type="radio" name="opt">
                    <img class='roller' src="http://thumbs.dreamstime.com/z/food-balanced-diet-form-circle-15460029.jpg">
                </label>
                <p>img3</p>
            </div>
        </div>
    </div>
    <div class="text">
        <div class="pull-left ">
            <div class="btn">
                <label>
                    <input type="radio" name="opt">
                    <img class='roller' src="http://thumbs.dreamstime.com/z/food-balanced-diet-form-circle-15460029.jpg">
                </label>
                <p>1</p>
            </div>
            <div class="btn">
                <label>
                    <input type="radio" name="opt">
                    <img class='roller' src="http://thumbs.dreamstime.com/z/food-balanced-diet-form-circle-15460029.jpg">
                </label>
                <p>2</p>
            </div>
            <div class="btn">
                <label>
                    <input type="radio" name="opt">
                    <img class='roller' src="http://thumbs.dreamstime.com/z/food-balanced-diet-form-circle-15460029.jpg">
                </label>
                <p>3</p>
            </div>
        </div>
    </div>
</div>

＆＃13;

或为border-radius制作动画效果：

-jsFiddle-

Answer 2

这应该有效：

$('.roller').on('click', function() {
    $('.roller').removeClass('highlight');
    $(this).addClass('highlight'); 
});

Answer 3

.roller元素不是兄弟，所以你必须做一些DOM遍历来定位它们。

要么： $(this).addClass('highlight').parent().siblings().find('.roller').removeClass('highlight');

或

$('.roller').removeClass('highlight');
$(this).addClass('highlight');

Answer 4

在将其添加到下一张图片之前删除您的课程。

$('.roller').on('click', function() {
    $('.roller').removeClass('highlight');
    $(this).addClass('highlight'); 
});

Answer 5

 $('.roller').on('click', function() {
   $(this).parent().siblings().find('.roller').removeClass('highlight'); 
   $(this).addClass('highlight');
 });

JSFiddle

Answer 6

就像那个一样简单

$("#test_inner .test-item").each(function(e) {
    if (e != 0)
        $(this).hide();
});

var array = $(".test-item");
var index = 0;
$(".next-btn").click(function(){
if(index==array.length-1){
    $(this).hide();
}

array.eq(index++).hide();
array.eq(index).show();

或使用范围更快：

$('.roller').on('click', function() {
   $('.roller').removeClass('highlight').filter(this).addClass('highlight'); 
});

如果将此限制在'.text'类

的范围内

$('.roller', '.span12').on('click', function() {
    $('.roller','.span12').removeClass('highlight').filter(this).addClass('highlight'); 
});

https://jsfiddle.net/10w93bp7/

jQuery在单击其他图像时删除图像类

6 个答案:

-jsFiddle-

-jsFiddle-