javascript - 在 jquery click 事件上打开和关闭边框半径

Question

div很少。我需要用点击事件改变它们的边界半径。我只改变了一次边界半径。当有人点击一个 div 时，边框半径应该更改为 50%，然后再次点击同一个 div，应用的边框半径应该删除。

虽然有一个边框更改了 div 并且如果单击更改的 div 的另一个 div 边框应该删除并且边框半径应该应用于单击的 div。这意味着一次只能应用一个边界半径 div。

我有这个代码

jsfiddle

HTML

<div></div>

<div></div>

<div></div>

<div></div>

和这个CSS

div {
    width: 100px;
    height: 100px;
    background: #000;
    margin: 10px;
    float: left;
}

还有这个jquery代码

$('div').each(function(){
    $(this).click(function(){
        $(this).css('border-radius', '50%');
    });
});

请帮帮我，关于这个..我不知道该怎么做..

Answer 1

为此使用一个类：

演示

$('div').click(function(){
    if($(this).is('.radius')){$(this).removeClass('radius'); return;}
    $(this).addClass('radius').siblings().removeClass('radius');
});


div.radius {
    border-radius:50%
}

Answer 2

我已经更新了添加 CSS 类的代码：http: //jsfiddle.net/Hq6TQ/7/

div.round-border {
    border-radius: 50%;
}

并使用 jQuery 添加它：

$(this).addClass("round-border");

PS您不需要遍历每个 div 元素并绑定事件，您可以使用以下代码段：

$('div').click(function(){
    // do whatever you need here
});

更新：到目前为止，这是您最初要求的，我没有很好地阅读您的问题。

Answer 3

您可能希望提供比这更多的 div。所以你应该使用一个类来选择它们。我已经更新了您的代码并为您提供了此功能：

$('div.radius').each(function(){
    $(this).click(function(){
        $('div.radius').css('border-radius','0');
        $(this).css('border-radius', '50%');
    });
});

http://jsfiddle.net/C23a2/1/

Answer 4

$('div').toggle(function(){
    $(this).css('border-radius', '50%');
});

Answer 5

首先，您不需要为单击事件执行每个操作。直接用click就行了。然后：

$('div').click(function(){
    $(this).css('border-radius', $(this).css('border-radius') == '50%' ? '0px' : '50%');
});

一个（更好的）替代方法是toggleClass()像这里的一些人建议的那样使用。

Answer 6

查询：

$('div').click(function () {
    $('div').removeClass('radius')
    $(this).addClass('radius');
});

CSS：

div.radius {
    border-radius:50%
}

演示

Answer 7

试试这个，效果很好。

$('div').each(function () {
    $(this).click(function () {

        if ($(this).css("border-radius") == "0px") {
            $(this).css('border-radius', '50%');
        } else {
            $(this).css('border-radius', '0');
        }
    });
});

JSFIDDLE