Question

希望有人能告诉我，我没有看到解决这个问题的愚蠢行为：

我正在使用jquery根据类名操作按钮的内容。我已经成功地操纵了两个案例的内容 - 一个没有类名，另一个类名是“看过”而不是“未观看”，如下例所示。

我认为值得一提的是，“观看”和“未观看”的情况最终都嵌套在同一div内。

HTML：

<div class="col-md-2 col-xs-6 movie"><img src="">
    <div class="movie-data">
        <h4 class="movie-title">Title</h4>
        <a href="">Discover &xrarr;</a>
        <button class="unwatch" type="button"><span>Add to watchlist</span></button>
    </div>
</div>

jQuery的：

$(function(){
  if ($('.movie-data button').hasClass('watch')) {
    $('button > span').text('Mark as watched');
  } else if ($(this).hasClass('unwatch')) {
    $('button > span').text('S my D');
  } else {
    $('button > span').text('Add to watchlist');
  }
});

我最终得到的是“观看”和“未观看”按钮的相同内容。

Answer 1

你在这里做的工作比你需要的多。由于您根据“watch”或“unwatch”类的存在来更改内容，因此您可以将它们用作选择器的一部分：

$(function(){
  $('.movie-data button > span').text('Add to watchlist');
  $('.movie-data button.watch > span').text('Mark as watched');
  $('.movie-data button.unwatch > span').text('S my D');
});

（但是，对于它的价值，原始代码中的问题是$(this)没有指出在您使用它的上下文中有用的东西，并且每次使用$('button > span')都会匹配文档中的每个按钮，而不仅仅是包含if子句的按钮。）

Answer 2

在您的脚本$(this)中没有引用任何内容，因此您可以在第一个if条件中检查时检查班级

$(function(){
    if ($('.movie-data button').hasClass('watch')) {
        $('button > span').text('Mark as watched');
    } else if ($('.movie-data button').hasClass('unwatch')) {
        $('button > span').text('S my D');
    } else {
        $('button > span').text('Add to watchlist');
    }
});

使用jQuery操作<button>内容

2 个答案: