4

以下は、Gmailスタイルのようなコードをブックマークしたい私の単純なコードです。

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

上記のステートメントは機能していません。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>
4

3 に答える 3

5

thisajaxコールバックでは.star要素ではなく、jqXHRオブジェクトです。これを行う：

$(".star").click(function () {
    var $this = $(this);
    /* snip */
    if (response == 'true') {
        $this.toggleClass('favorited');
    /* snip */
于 2013-02-27T02:20:12.850 に答える
2

$(this) は、応答の範囲内になくなりました。あなたはそれを次のように参照することができます...

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

その後、応答呼び出しで

elem.toggleClass('favorited');
于 2013-02-27T02:20:26.337 に答える
0

(ほとんどすべてを) 同じに保つには、ajax 呼び出しのコンテキストを設定します。

$.ajax({ context: this, success: function () {...} });

別のメモとして、クリックイベントの設定方法に関して、他の人に似たものを勧めました...

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

同じ機能を提供し、パフォーマンスを向上させ、スター クラスを使用してドキュメントに追加または削除されたアイテムに自動的に対応します。

于 2013-02-27T02:32:10.620 に答える