Question

我在点击时执行jQuery / Angular函数时出现问题。

<a ng-click="like()" href="#" class="like like--yes"></a>

基本上，当在类似按钮上发生点击时，我想切换类似的东西 - 是的等等 - 没有类。我在点击时检查了DOM，一旦设置为喜欢 - 不，它拒绝改变。

$scope.like = function() {
    $('.like--no').toggleClass('like--no like--yes');
    $('.like--yes').toggleClass('like--yes like--no');
}

我需要两个不同的功能，因为我根据它是否喜欢/不同来添加不同的动画。

知道我哪里出错了吗？还有更多内容，但为了清晰起见，我已经删除了一些不必要的代码。

感谢。

Answer 1

我发现你使用的是AngularJS而不是使用jQuery，为什么不使用ngClass？

像这样：

    <a ng-click="toggleLike()" ng-class="{'like--yes': like, 'like--no': !like}">Hello World!</a>

Plunkr

Answer 2

试试这个

$('.like').on('click',function(e){
    e.preventDefault();
    $(this).toggleClass('like--no like--yes');
    if($(this).text() == 'like'){
        $(this).text('unlike');
    }else{
         $(this).text('like');
    }
});

和html

<a href="#" class="like like--yes">like</a>

JSFIDDLE

Answer 3

似乎存在逻辑问题

$scope.like = function() {
    $('.like--no').toggleClass('like--no like--yes');
    $('.like--yes').toggleClass('like--yes like--no');
}

案例： - 第一行改变 - 不喜欢 - 是的，在第二行改变之后 - 是的喜欢 - 再没有。

你应该尝试.hasClass（）函数检查元素是否有类，然后使用切换。

Answer 4

似乎第二行正在覆盖第一行。

它将课程设置为like--yes，第二行抓住like--yes，并且每次都将其设置为like--no。

尝试类似：

$scope.like = function() {
    if( $('.like').hasClass( 'like--yes' ) ) {
       $('.like').removeClass( 'like--yes' );
       $('.like').addClass( 'like--no' );
    } else {
        $('.like').removeClass('like--no');
        $('.like').addClass('like--yes');
    }
}

也许您需要将$('.link')更改为$(this)才能获得实际点击的元素。

Answer 5

在Angular的控制器中处理DOM jQuery风格时，通常不赞成这种做法，这是你试图做的，也是建议的其他答案。

只有一个反映like状态的变量（您可以直接在视图中或$scope.like()函数内设置它，并使用ng-class切换类：

<a ng-click="like=!like" href="#" ng-class="like ? 'like--yes':'like--no'"></a>

toggleClass（）只切换到一个类

5 个答案: