使用 jquery 在 DOM 中更改锚点类

Change anchor class in DOM using jquery

本文关键字：jquery DOM 使用      更新时间：2023-09-26
<a class="behaviour1" href="link1">Test</a>

我有两个针对"行为 1"和"行为 2"类的点击事件。 

$('.behaviour1').click(function() {
    alert('behaviour - 1');
    $(this).prop('class', 'behaviour2');
});
$('.behaviour2').click(function() {
    alert('behaviour - 2');
    $(this).prop('class', 'behaviour1');
});

我想更改锚标签的行为。但它不起作用。我每次都会得到"行为1"。它不会更改为"行为2"。

我如何让它工作？

事件处理程序在页面加载时附加，稍后更改类不会更改事件处理程序，无论您以后添加什么类，它们仍附加到相同的元素。

您必须完全委派或更改其工作方式，第一个选项是最简单的：

$(document).on('click', '.behaviour1', function() {
    alert('behaviour - 1');
    $(this).prop('className', 'behaviour2');
});
$(document).on('click', '.behaviour2', function() {
    alert('behaviour - 2');
    changeBehaviour();
    $(this).prop('className', 'behaviour1');
});

将document替换为锚点的父元素

或简单的拨动开关：

$('.behaviour').on('click', function() {
     if ( $(this).data('flag') ) {
         // do behaviour 1
     }else{
         // do behaviour 2
     }
     $(this).data('flag', !$(this).data('flag'));
});

演示

$(document).on('click','.behaviour1, .behaviour2', function() {
    $(this).toggleClass('behaviour1 behaviour2');
    if($(this).hasClass('behaviour1')) {
        alert('behaviour - 1');
    } else {
        alert('behaviour - 2');
    }
});

交换类

$(document).on('click','.behaviour1', function() {
    alert('behaviour - 1');
    $(this).removeClass('behaviour1').addClass('behaviour2');
});
$(document).on('click','.behaviour2', function() {
    alert('behaviour - 2');
    $(this).removeClass('behaviour2').addClass('behaviour1');
});

小提琴演示

相关文章：