2013-08-26 2 views
0

Можно ли использовать toggleclass на кнопке, когда достигается максимальное количество добавленных элементов?toggleClass при достижении максимального количества добавленных элементов

Я хочу, чтобы 6 дополнительных разделов/элементов были максимальными. Я добавил счетчик переменных. Таким образом, он увеличивается при добавлении элемента и уменьшается при нажатии кнопки removebutton. Последним шагом является toggleclass кнопку (как отключена кнопка). Итак, когда достигнуто максимальное количество, кнопка toggleClass = красный.

Что я хочу:

На шестом приложенном пункте, фон кнопки меняется на красный и не добавляет больше пунктов (инвалиды). Когда пользователь удаляет один, кнопка переключается обратно в исходное состояние, и кнопка снова запускает событие добавления. Как я могу интегрировать toggleClass в свой код?

HTML

<div id="addbutton">ADD</div> 
<div id="box"></div> 

JS

var amount = 0; 
var div = '<div>' + 
    '<input type="text"/>' + 
    '<input type="button" class="removebtn" value="delete"/>' + 
    '</div>'; 

$('#addbutton').click(function() { 
    amount++; 
    if (amount < 6) { 
     $('#box').append(div); 
     //alert(amount); 
    } else { 
     $(this).toggleClass(".red"); 
    } 
}); 


$('.removebtn').live('click', function() { 
    $(this).parent().remove(); 
    amount--; 
}); 

JSFIDDLE

ответ

2

Обновлено скрипку работать лучше. Добавляйте только прирост при добавлении. Иначе, если люди продолжают нажимать, даже если они красные, количество будет расти.

Попробуйте это обновление скрипку: http://jsfiddle.net/V395Y/2/

В основном вы используете addClass и removeClass. Я обновил как Jquery и ваш CSS (важная часть)

$(this).addClass("red"); 
$('#addbutton').removeClass('red'); 
background: red !important; 

Поскольку ваша кнопка уже есть класс, то BGCOLOR для Красного класса должно быть! Важно. Это говорит о том, что с красным цветом класса цвет красного цвета более важен, чем желтый. Когда вы удаляете класс, из cc только желтый (по умолчанию) класс остается, и кнопка возвращается к желтому.

+0

спасибо !! Можете ли вы объяснить важную часть немного больше? – Opoe

+0

Удивительный, очень ясный и полезный ответ – Opoe

Смежные вопросы