toggleClass 在 ajax 情况下无法正常工作答案

【问题标题】：toggleClass not working properly in ajax casetoggleClass 在 ajax 情况下无法正常工作
【发布时间】：2013-02-27 02:17:32
【问题描述】：

下面是我的简单代码，想将代码加入到 Gmail 样式的书签中。

$(this).toggleClass('favorited');

上述语句不起作用。得到 ajax 响应后，star 不会变成黄色。但是如果你把上面的语句放在 ajax 之外会阻止它工作。无法理解为什么会这样。

<html>
<head>
<style>
.star {
    background-color: transparent;
    background-image: url('http://www.technicalkeeda.com/img/images/star-off.png');
    background-repeat:no-repeat;
    display: block;  
    height:16px;
    width:16px;
    float:left;
}   

.star.favorited {
     text-indent: -5000px;
    background-color: transparent;
    background-image: url('http://www.technicalkeeda.com/img/images/star-on.png');
    background-repeat:no-repeat;   
    height:16px;
    width:16px;
    float:left;
}

span{
color: #2864B4;
}
</style>

<script type="text/javascript" src="http://www.technicalkeeda.com/js/javascripts/plugin/jquery.js"></script>
<script>
    $(document).ready(function(){
         $('.star').click(function() {
                var id = $(this).parents('div').attr('id');             

                $.ajax({
                        type: "post",
                        url: "http://www.technicalkeeda.com/demos/bookmark",
                        cache: false,               
                        data:{'bookmarkId': id},
                        success: function(response){
                            alert('response' +response);
                             if(response=='true'){                                  
                                 $(this).toggleClass('favorited');                                               
                            }else{
                                alert('Sorry Unable bookmark..');
                            }   

                        },
                        error: function(){                      
                            alert('Error while request..');
                        }
                     });
          });
    });
</script>
</head>
<body>
<div id="1000"><a href="javascript:void(0);" class="star" ></a><span>Php CodeIgniter Server Side Form Validation Example</span></div>
<div id="2000"><a href="javascript:void(0);" class="star"></a><span>Live Search Using Jquery Ajax, Php Codeigniter and Mysql</span></div>
<div id="3000"><a href="javascript:void(0);" class="star"></a><span>Voting system Using jQuery Ajax and Php Codeigniter Framework</span></div>
</body>
</html>

【问题讨论】：

是的，如果您将响应硬编码为 true ，仍然无法正常工作

标签： jquery css ajax

【解决方案1】：

ajax 回调中的this 不是.star 元素，它是一个jqXHR 对象。这样做：

$(".star").click(function () {
    var $this = $(this);
    /* snip */
    if (response == 'true') {
        $this.toggleClass('favorited');
    /* snip */

【讨论】：

对！只是出于好奇，我在这些情况下看到了很多 $this 的分配。与 elem 这样的基本字符串相比，这种命名约定有什么真正的好处吗？
@KaiQing 我倾向于命名包含以$ 开头的jQuery 集合的变量，不管它们是什么，所以$this 只是自动产生的。除了清晰之外没有其他好处；如果您/您的开发团队不清楚，请随意使用

【解决方案2】：

$(this) 不再在您的回复范围内。你可以这样引用它...

$('.star').click(function() {
    var elem = $(this);

稍后在您的响应电话中

elem.toggleClass('favorited');

【讨论】：

【解决方案3】：

要保持（几乎所有内容）相同，请设置 ajax 调用的上下文：

$.ajax({ 上下文：这个，成功：函数（）{...} });

另外，关于如何设置点击事件，我刚刚向其他人推荐了类似的东西...

$('document.body').on('click', '.star', function () {....});

将为您提供相同的功能，提高性能，并自动容纳添加或删除到带有星类的文档中的任何项目。

【讨论】：