0

追加されたアイテムの最大量に達したときに、ボタンでトグルクラスを使用することは可能ですか?

追加された div/items を 6 つまで最大にしたいと考えています。可変カウンターを追加しました。したがって、アイテムが追加されると増加し、削除ボタンがクリックされると減少します。最後のステップは、ボタンをトグルクラスにすることです (無効化されたボタンのように)。したがって、最大量に達すると、ボタンの toggleClass = red.

私が欲しいもの：

6 番目に追加された項目で、ボタンの背景が赤に変わり、それ以上項目を追加しません (無効化)。ユーザーがボタンを削除すると、ボタンは元の状態に戻り、ボタンは再度追加イベントを発生させます。私のコードに 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

4

1 に答える 1

2

より適切に機能するようにフィドルを更新しました。実際に追加するときは、金額を増やすだけです。それ以外の場合は、赤でも追加をクリックし続けると、金額が上がります。

この更新フィドルを試してください: http://jsfiddle.net/V395Y/2/

基本的に、addClass と removeClass を使用します。JqueryとCSSの両方を更新しました（重要な部分）

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

ボタンには既にクラスがあるため、Red クラスの bgcolor を !important にする必要があります。これは、クラス red が存在するため、赤が黄色よりも重要であることをブラウザに伝えます。クラスを削除すると、黄色 (デフォルト) のクラスのみが残り、ボタンは黄色に戻ります。

于 2013-08-26T11:27:46.237 に答える