Question

我有一个问题是在按下时禁用我的锚。

HTML：

<a href='#' data-bind='click: clickActivateSpatialSearch' id='draw_polygon'>
<i class='polygon_mark'></i>
</a>
<a href='#' data-bind='click: clickActivateSpatialSearchBox' id='draw_box'>
<i class='square_mark'></i>
</a>

的jQuery

    $('.square_mark').click(function () {
        if(!$(this).hasClass('active')) {
            $(this).addClass('active');
            $('.polygon_mark').off('click', disabler);
        } else {
            $(this).removeClass('active');
            $('.polygon_mark').on('click', disabler);
        }
    });
    $('.polygon_mark').click(function () {
        if(!$(this).hasClass('active')) {
            $(this).addClass('active');
            $('.square_mark').off('click', disabler);
        } else {
            $(this).removeClass('active');
            $('.square_mark').on('click', disabler);
        }
    });
});

功能：

disabler: function(event) {
    event.preventDefault();
    return false;
},

改变类的功能工作正常，但我想添加到这个，当按下＃1锚时，这会禁用另一个锚，当我再次按下它时，我希望它能够重新启用锚点，以及另一种方式，但锚点＃2。

我尝试过这样的事情，但我无法让它发挥作用，也不能完全理解它。

Answer 1

执行此操作并向css添加禁用类。

$('.square_mark').click(function () {
        $(this).toggleClass('active');
        $('.polygon_mark').toggleClass("disabled");
});

$('.polygon_mark').click(function () {
        $(this).toggleClass('active');
        $('.square_mark').toggleClass("disabled");
});

这应该做三重奏。

.disabled {
   pointer-events: none;
   cursor: default;
}

编辑：关于jsfiddle的示例：http://jsfiddle.net/uKCYN/

如果您需要检查活动类是否可以执行其他操作，则可以像这样编写代码：

$('.square_mark').click(function () {
    if(!$(this).hasClass('active'))
        $(this).addClass('active');
    else
        $(this).removeClass('active');
    $('.polygon_mark').toggleClass("disabled");
});

$('.polygon_mark').click(function () {
    if(!$(this).hasClass('active'))
        $(this).addClass('active');
    else
        $(this).removeClass('active');
    $('.square_mark').toggleClass("disabled");
});

并将其他内容添加到if子句中。

Answer 2

只需像这样修改处理函数，然后再试一次：

// handler function
function disabler(event) {
    event.preventDefault();
    console.log('item anchor clicked');
}

使用onclick禁用锚点

2 个答案: