Question

几乎没有div。我需要使用click事件更改它们的边框半径。我设法只改变一次边界半径。当有人点击div时，边界的radous应该更改为50％，然后再次点击同一个div，应用边框半径应该删除。

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

我有这段代码

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

使用一个类：

DEMO

$('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");

P.S。您不需要迭代每个div元素并绑定事件，您只需使用以下代码段：

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

更新：到目前为止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

首先，您不需要为点击事件执行每项操作。只需直接点击即可。然后：

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

（更好）替代方案是使用toggleClass()，就像这里建议的人一样。

Answer 6

JQUERY：

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

CSS：

div.radius {
    border-radius:50%
}

DEMO

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

在jquery点击事件中打开和关闭边界半径

7 个答案: