Question

下面是我的简单代码，其中想要为Gmail样式添加代码。

$（本）.toggleClass（ '收藏'）;

以上声明无效。获得ajax响应之后，明星并没有变成黄色的。但是如果你把上面的语句放在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>

Answer 1

ajax回调中的

this不是.star元素，而是jqXHR对象。这样做：

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

Answer 2

$（this）已不在您的回复范围内。你可以这样引用它......

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

然后在你的回复电话中

elem.toggleClass('favorited');

Answer 3

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

$。AJAX（{ 上下文：这个，成功：function（）{...} }）;

另一方面，我刚刚完成了关于如何设置点击事件的推荐类似于他人的事情......

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

将为您提供相同的功能，提高性能并自动适应使用星级类添加或删除到文档中的任何项目。

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

3 个答案: