Question

我有一个链接文本作为开关开/关按钮，我正在尝试使用它而不重新加载任何页面。关闭时，链接具有与打开状态不同的某个类，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&switch=on" class="on">on</a>

因此，如果单击看起来与上面完全相同的元素，则按钮将切换为关闭并且所有链接属性都将被更改，但是当我第二次单击时（在具有新属性的链接上），发出ajax请求，它在#front给我结果，但它不会再次改变链接的属性。

有什么问题？

Answer 1

您正在切换类，因此当它最初加载.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() {..

您可以尝试将2个处理程序中的重复代码简化为一个处理程序$(document).on('click', '.on, .off', function() {，因为差异完全取决于文本on和off。

Answer 2

执行$('.off').click(function() {...时，点击处理程序会附加到执行代码时存在的所有.off元素。执行此代码时，没有.off个元素。

您应该只使用一个click处理程序，然后使用一些逻辑来确定它当前处于哪种状态，或将状态存储在变量中。

Answer 3

问题在于，即使您更改了类，它仍然具有off的绑定，并且实际上从未获得on的绑定。

绑定在DOM准备就绪。由于您的代码只有off类，因此未应用on，关闭则会触发。

使用.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;
});

Answer 4

试试看是否有效

$(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;

     });

Answer 5

尝试使用此代码。用这一个替换你的两个单击功能：

$(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;
    });

这是完成的事情：

将click函数更改为$ .on（）函数。我认为来回切换类会导致$ .click（）函数失去对元素的绑定。 $ .on（）应该阻止
删除您在两个点击功能中使用的重复代码，并将它们统一起来。

Jquery错误 - 打开/关闭链接

5 个答案: