打開和關閉jquery點擊事件的邊界半徑

有幾個div。我需要用click事件來改變它們的邊界半徑。我設法只改變一次邊界半徑。當有人點擊一個div時，邊框應該改爲50％，然後再次點擊同一個div，應用邊框半徑應該移除。打開和關閉jquery點擊事件的邊界半徑

雖然有一個邊框更改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%'); 
    }); 
});

請幫助我，對這個..我不知道如何做到這一點的想法..

來源

2013-06-25 Mr.Zero to Hero

使用一類爲：

DEMO

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


div.radius { 
    border-radius:50% 
}

來源

2013-06-25 11:50:05

謝謝你們......非常感謝.. –

@ Mr.ZerotoHero如果選定的DIV已經有這樣的邊框，這個不會刪除圓角邊框，請看下面我更新的答案。 – haynar

@haynar Thx，更新回答 –

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

來源

2013-06-25 11:48:07

如果我在另一個DIV點擊則出現以前的邊界半徑應用於DIV，那prviously應用邊界半徑應刪除:)怎麼做呢 –

首先，您不需要爲點擊事件做每個事件。只需直接點擊即可。然後：

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

A（最好）替代方法是使用toggleClass()像有些人建議在這裏。

來源

2013-06-25 11:50:39 casraf

我已經更新了你的代碼添加CSS類：http://jsfiddle.net/Hq6TQ/7/

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

並將其添加使用jQuery：

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

附：你並不需要遍歷每個div元素，並綁定事件，你可以用下面的代碼片段：

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

UPDATE：到目前爲止here就是你開始問，我沒有很好地閱讀你的問題。

來源

2013-06-25 11:50:53 haynar

您可能想要提供比此更多的div。所以你應該使用一個類來選擇它們。我已經更新了你的代碼，給你這樣的功能：

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

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

來源

2013-06-25 11:54:03

JQUERY：

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

CSS：

div.radius { 
    border-radius:50% 
}

DEMO

來源

2013-06-25 11:59:40 Aravind30790

試試這個，運行良好。

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

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

來源

2013-06-25 12:11:12 Praveen

打開和關閉jquery點擊事件的邊界半徑

回答

相關問題