1

スイッチのオン/オフ ボタンとして機能するリンク テキストがあり、ページをリロードせずに使用しようとしています。オフの場合、リンクには、オンの状態とは異なる特定のクラス、URL、およびテキスト値があります。(つまり、オンにすると緑に表示され、オフにすると赤に表示されます)

少し下に、私が現在使用している jquery コードがあります。

$('.off').click(function() {
    var element = $(this);
    var link = $(this).attr('href');
    var newlink = link.replace('off','on');
    $.get(link, function(data) {
    $('#front').html(data);
    $('#front').center().show();
    $('#background').show();
    if( data == "Button switched." ) { element.attr('href', newlink); element.text('on'); element.attr('class', 'on'); }
    });
    return false;
            });

$('.on').click(function() {
    var element = $(this);
    var link = $(this).attr('href');
    var newlink = link.replace('on','off');
    $.get(link, function(data) {
    $('#front').html(data);
    $('#front').center().show();
    $('#background').show();
    if( data == "Button switched off." ) { element.attr('href', newlink); element.text('off'); element.attr('class', 'off'); }
    });
    return false;

          });

私が話している HTML 要素は次のようになります。
<a href="engine.php?id=15&amp;switch=on" class="on">on</a>

したがって、上記とまったく同じように見える要素がクリックされている場合、ボタンはオフに切り替えられ、すべてのリンク属性が変更されていますが、2 回目 (新しい属性を持つリンク) をクリックすると、ajax が作成されますリクエストすると結果#frontが返されますが、リンクの属性が再度変更されることはありません。

どうしたの？

4

5 に答える 5

2

クラスを切り替えているため、最初にロードしたときに.onまだ存在しないため、そのためのイベントは登録されていません。これは、イベント委任を使用して解決できます。

$(document).on('click', '.off', function() {
    var element = $(this);
    var link = $(this).attr('href');
    var newlink = link.replace('off','on');
    $.get(link, function(data) {
    $('#front').html(data);
    $('#front').center().show();
    $('#background').show();
    if( data == "Button switched." ) { element.attr('href', newlink); element.text('on'); element.attr('class', 'on'); }
    });
    return false;
            });

$(document).on('click', '.on', function() {
    var element = $(this);
    var link = $(this).attr('href');
    var newlink = link.replace('on','off');
    $.get(link, function(data) {
    $('#front').html(data);
    $('#front').center().show();
    $('#background').show();
    if( data == "Button switched off." ) { element.attr('href', newlink); element.text('off'); element.attr('class', 'off'); }
    });
    return false;

   });

ところで、 を使用しないようにしてくださいdocument。代わりに、いつでも DOM に存在する任意のコンテナーのセレクターを使用してください。すなわち$('.somContainerSelector').on('click', '.off', function() {..

$(document).on('click', '.on, .off', function() {違いはすべてテキストonとoff.

于 2013-05-31T20:18:34.733 に答える
1

これを行うと、コードが実行された時点で存在するすべての要素に$('.off').click(function() {...クリック ハンドラがアタッチされます。このコードを実行すると、要素はありません。.off.off

おそらく、単一のclickハンドラーを使用して、現在の状態を判断するか、状態を変数に格納するロジックを用意する必要があります。

于 2013-05-31T20:18:30.560 に答える
1

これが機能するかどうか試してみてください

$(document).on('click', '.on, .off', function() {
        var element = $(this);
        var link = $(this).attr('href');
        var newlink = link.replace('on','off');

        $.get(link, function(data) {
           $('#front').html(data).center().show();
           $('#background').show();
              if( data == "Button switched off." ) { element.attr('href', newlink); element.text('off'); element.removeClass('on').addClass('off'); } 
              else if( data == "Button switched." ) { element.attr('href', newlink); element.text('on'); element.removeClass('off').addClass('on'); }
        });

        return false;

     });
于 2013-05-31T20:23:27.633 に答える
1

問題は、クラスを変更しても、まだ のバインディングがoffあり、実際には のバインディングを取得できないことですon。

バインディングは DOM 対応で適用されます。タグにはクラスしかないためoff、on は適用されず、off は常にトリガーされます。

.on()そのようなバインディングを使用します。

$(document).on('click', '.off', function(){...})
$(document).on('click', '.on', function(){...})
//Document should be a selector of the closest non-dynamic parent.

そしてそれはうまくいくでしょう。

また、コードはほぼ同じなので、1 つの関数でラップできます。

$('.off').click(function() {
    var element = $(this);
    var link = element.attr('href');
    var isOff = element.hasClass('off')
    var newlink = isOff ? link.replace('off','on') : link.replace('on','of')
    $.get(link, function(data) {
        $('#front').html(data);
        $('#front').center().show();
        $('#background').show();
        if( data == "Button switched." ) { 
            element.attr('href', newlink);
            element.text(isOff ? 'on' : 'off');
            element.toggleClass('on off'); 
        }
    });
    return false;
});
于 2013-05-31T20:19:56.720 に答える
1

このコードを試してみてください。2 回のクリック機能を次の 1 つに置き換えます。

$(document).on('click', '.on, .off', function () {
        var $element = $(this);
        var newmode = $element.hasClass('on') ? "off" : "on";
        var link = $(this).attr('href');
        var newlink = (link.match('on')) ? link.replace('on','off') : link.replace('off', 'on');
        $.get(link, function (data) {
                $('#front').html(data);
                $('#front').center().show();
                $('#background').show();
                if (data == "Button switched" + ((newmode == "off") ? " off" : "") + ".") {
                    element.attr('href', newlink);
                    element.text(newmode);
                    element.removeClass('on off').addClass(newmode);
                }
            });
        return false;
    });

これが達成することは次のとおりです。

  1. クリック関数を $.on() 関数に変更します。クラスを前後に切り替えると、 $.click() 関数が要素へのバインディングを失う原因になったと思います。$.on() はそれを防ぐべきです
  2. 両方のクリック機能で重複していたコードを削除し、すべてを統合します。
于 2013-05-31T20:24:49.843 に答える