0

このコードは、CSS から参照される画像とともにクラスを変更するため、最初のクリックで正常に機能します。しかし、2回目にクリックすると、以前のクラスでクリックしたように動作し、すでに削除されていると想定しています。

 if(Model.SeenItWantToSeeIt.Status==1)
              {
                    <div class="movie_data">
                    <div  class="usermovie_option"><a href="javascript:Void(0)"   class="dont_want_to_see_it" title="I have seen this movie">&nbsp;</a></div>   
                    </div>
                    <div class="clear"></div>

              }
              else{
                    <div class="movie_data">
                    <div  class="usermovie_option"><a href="javascript:Void(0)"   class="want_to_see_it" title="I have seen this movie">&nbsp;</a></div>    
                    </div>
                    <div class="clear"></div>

              }

クラスを切り替えるためのJavascriptは

 $(".want_to_see_it").click(function () {
        var wantToSeeIt = $(this);
        alert('clicked on want to see it.');
        $.ajax({
            url: '@Url.Action("SeenIt", "MovieProfile")',
            data: { Status: 1, MovieID: movieID },
            dataType: 'json',
            type: "POST",
            success: function (data) {
                wantToSeeIt.removeClass();
                wantToSeeIt.addClass("dont_want_to_see_it");
                $("dont_want_to_see_it").show();

            },
            error: function (data) {
                alert('Error occurred.');
            }

        });

    });

    $(".dont_want_to_see_it").click(function () {
        alert('clicked on donot want to see it');
        var wantToSeeIt = $(this);
        $.ajax({
            url: '@Url.Action("SeenIt", "MovieProfile")',
            data: { Status: 0, MovieID: movieID },
            dataType: 'json',
            type: "POST",
            success: function (data) {

                wantToSeeIt.removeClass();
                wantToSeeIt.addClass("want_to_see_it");
                $("want_to_see_it").show();

            },
            error: function (data) {
                alert('Error occurred.');
            }

        });

    });

そして問題は、クリックするたびに「クリックしたのを見たくない」または「クリックしたのを見たくない」という警告が表示されることです。私がしなければならないことは、それぞれの画像をクリックするたびに、このメッセージが交互に表示されることです。

4

2 に答える 2

1

ここでの問題は、各要素のクリック時にハンドラーを動的に変更したいということです。ただし、イベントはクリック イベントを使用して要素に直接バインドされます。

  1. 1 つのオプションは、それぞれの項目を非表示および表示することです。
  2. もう 1 つのオプションは、イベントをバインドおよびバインド解除することです。

  3. 3 番目のオプションは、イベント委任を使用することです。イベント委譲では、イベントは要素に直接アタッチされず、代わりに委譲されるため、要件はこれで機能します。したがって、そのクラス名にサブスクライブされたクラス名イベントを交換すると、自動的に委任されます。同じ要素を次にクリックすると、新しいclass name. これがあなたが探していたものかどうかを確認してください。

     $(document).on('click',".want_to_see_it" ,function (e) {
   var wantToSeeIt = $(this);
    alert('clicked on want to see it.');
    ///Your ajax
    wantToSeeIt.removeClass();
    wantToSeeIt.addClass("dont_want_to_see_it");
    $(".dont_want_to_see_it").show();
  });

   $(document).on('click',".dont_want_to_see_it" ,function (e) {
    alert('clicked on donot want to see it');
    var wantToSeeIt = $(this);
    ///Your ajax
    wantToSeeIt.removeClass();
    wantToSeeIt.addClass("want_to_see_it");
    $(".want_to_see_it").show();

});

注:- ドキュメントに添付した例では、ドキュメントに添付するのではなく、いつでも DOM に存在する任意の要素に添付する必要があります。

デモ

.ajaxの成功でクラス名の前に見逃した別の問題がありました。

于 2013-05-14T01:34:21.627 に答える