toggleClass在ajax案例中无法正常工作

问题描述：

下面是我的简单代码，其中想要为Gmail样式的代码添加书签。toggleClass在ajax案例中无法正常工作

$（this）.toggleClass（'favitedited'）;

以上声明不起作用。得到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>

是的，如果你硬编码响应为真，仍然不能正常工作 – Vicky 2013-02-27 02:19:56

答

在Ajax回调this不是.star元件，它是一个对象jqXHR。这样做：

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

谢谢@爆炸药丸 – Vicky 2013-02-27 02:22:32

right-o！出于好奇，在这些情况下，我看到很多$ this的赋值。这个命名约定是否对像elem这样的基本字符串有什么实际好处？ – 2013-02-27 02:22:43

@KaiQing我倾向于命名包含以'$'开头的jQuery集合的变量，不管它们是什么，所以'$ this'只是自动产生的。除了清晰度之外，没有任何好处;如果您对您/您的开发团队不清楚，请随时使用 – 2013-02-27 02:23:41

答

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

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

然后

elem.toggleClass('favorited');

答

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

$ .ajax（{上下文：this， success：function（）{...} }）;

在另一方面，我刚刚做了类似的推荐给其他人关于如何设置点击事件东西...

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

会给你相同的功能，提高性能，并自动适应任何项目添加或删除与星级的文件。

toggleClass在ajax案例中无法正常工作

相关推荐