javascript - jqueryクリックイベントでボーダー半径のオンとオフを切り替える

Question

ディビジョンが少ない。クリック イベントで境界線の半径を変更する必要があります。境界線の半径を一度だけ変更できました。誰かが div をクリックすると、境界線の半径が 50% に変更され、同じ div をもう一度クリックすると、適用された境界線の半径が削除されます。

また、境界線が変更されたdivがあり、別のdivをクリックすると、変更されたdivの境界線が削除され、クリックされたdivに境界線の半径が適用されます。つまり、一度に div を適用する境界線の半径は 1 つだけでなければなりません。

私はこのコードを持っています

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

これよりも多くの 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 3

Jクエリ:

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

CSS:

div.radius {
    border-radius:50%
}

デモ

Answer 4

これを試してみてください。

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

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

JSFIDDLE

Answer 5

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