0

私はこのHTMLを持っています。

<a href="#" class="button redB" style="margin: 4px 4px 4px -4px;" id="estEditItemToggleMode" data-mode="edit">
    <img src="images/icons/light/check.png" alt="" class="icon">
    <span>Enable Editing Mode</span>
</a>

classクリックすると、属性の値を切り替え続けたいので、次のdata-mode ようになります。

if(mode == "edit") {
    class = "button blueB";
    data-mode = "select";
}
else if(mode == "select") {
    class = "button redB";
    data-mode = "edit";
}

これを使ってみました。

$('#estEditItemToggleMode').live('click', function(e){
    e.preventDefault();
    if($(this).data('mode') == "edit") {
        $(this).removeClass('redB').addClass('blueB');
        $(this).attr('data-mode', 'select');
    }
    else if($(this).data('mode') == "select") {
        $(this).removeClass('blueB').addClass('redB');
        $(this).attr('data-mode', 'edit');
    }
});

これにより、値が1回だけ切り替えられます。したがって、2回以上のクリックには影響しません。これを正しく行う方法。

4

1 に答える 1

2

以下のようにしてみてください、

デモ

$('#estEditItemToggleMode')
     .data('mode', 'edit') //added data to the link
     .live('click', function(e){
        e.preventDefault();

        var $this = $(this);
        var mode = $this.data('mode');

        if(mode == "edit") {
            $this.removeClass('redB').addClass('blueB');
            $this.data('mode', 'select'); //Changed from .attr to .data
        }
        else if(mode == "select") {
            $this.removeClass('blueB').addClass('redB');
            $this.data('mode', 'edit'); //Changed from .attr to .data
        }
 });

マークアップから属性を削除しdata-modeます。

<a href="#" class="button redB" style="margin: 4px 4px 4px -4px;" id="estEditItemToggleMode" >
    <img src="images/icons/light/check.png" alt="" class="icon">
    <span>Enable Editing Mode</span>
</a>

編集：いくつかの冗長なjQuery呼び出しをキャッシュしました。

編集2： .live廃止されたため、.onまたは.delegate

編集3：フィドル出力、

ここに画像の説明を入力してください

于 2012-05-09T15:09:43.390 に答える