操纵<button>内容与jQuery

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

你在这里做的工作比你需要的要多。既然你是基于“看”或“停止监视”类的存在而改变的东西，你可以用它们作为选择的一部分：

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