включення і виключення радіуса кордону на подію кліків jQuery

Є кілька дів. Мені потрібно змінити радіус кордону з них за подією кліків. Мені вдалося змінити радіус кордону лише один раз. Коли хтось натискає на розділ div, кордон radous повинен бути змінений на 50%, а ще раз натиснути на той самий розділ, щоб видалити застосовний радіус кордону.

І поки існує кордон, змінюється 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%');
    });
});

допоможіть мені, будь ласка, на цьому .. я не знаю, як це зробити ..

4

7 Відповіді

Для цього використовуйте клас:

DEMO

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


div.radius {
    border-radius:50%
}
10
додано
@Haynar Thx, оновлений відповідь
додано Автор A. Wolff, джерело
У цьому випадку скористайтеся цим кодом: jsfiddle.net/Hq6TQ/13
додано Автор A. Wolff, джерело
@ Mr.ZerotoHero цей елемент не знімає округлі кордони, якщо вибраний DIV вже має такий кордон, подивіться на мою оновлену відповідь нижче.
додано Автор haynar, джерело
+1 для оновлення
додано Автор haynar, джерело
Спасибі, хлопці ... Дуже багато чого ...
додано Автор Mr.Zero to Hero, джерело
@haynar та смажене Ще одне питання, якщо я обертаю ці divs, використовуючи інші елементи, такі як ul і т. д., він перестає працювати. Не могли б ви перевірити це посилання, будь ласка, jsfiddle.net/Hq6TQ/12
додано Автор Mr.Zero to Hero, джерело
Ще раз спасибі :)
додано Автор Mr.Zero to Hero, джерело

I have updated your code adding CSS classes: 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: so far here is what you've initially asked for, I didn't read your question well.

2
додано

Можливо, ви захочете надати більше divs, ніж це. Тому ви повинні користуватись класом, щоб вибрати їх. Я оновлюю ваш код і надаю вам цю функцію:

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

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

2
додано

Спробуйте це, працюйте добре.

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

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

JSFIDDLE

0
додано

JQUERY:

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

CSS:

div.radius {
    border-radius:50%
}

DEMO

0
додано
$('div').toggle(function(){
    $(this).css('border-radius', '50%');
});
0
додано
Якщо я натискаю на інший div, коли існує раніше застосований div радіус кордону, то, як видається, застосовуваний радіус кордону слід видалити :) як я можу це зробити
додано Автор Mr.Zero to Hero, джерело

По-перше, вам не потрібно робити кожен для події кліку. Просто натисніть кнопку безпосередньо. Потім:

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

А (кращою) альтернативою було б використовувати toggleClass() , як деякі запропоновані тут люди.

0
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram