0

此代码适用于第一次单击，因为它会更改类以及从 CSS 引用的图像。但是，当我第二次单击时，它的行为就像在我假设已经删除的上一课中单击一样。

 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. 一种选择是隐藏和显示相应的项目。
  2. 另一种选择是绑定和取消绑定事件。

  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 回答
0

问题是您需要unbind("click")清除以前的处理程序，然后为其新类绑定一个新的事件处理程序。

而不是取消绑定和重新绑定，而是在一个处理程序中执行：

$(".usermovie_option a").on("click", function () {
    var status = 0;
    if ($(this).hasClass("want_to_see_it")) {
        status = 1;
    }
    $.ajax({
        url: '@Url.Action("SeenIt", "MovieProfile")',
        data: { Status: status, MovieID: movieID,
        dataType: 'json',
        type: "POST",
        success: function (data) {                
            $(this).toggleClass("want_to_see_it");
            $(this).toggleClass("dont_want_to_see_it");
        },
        error: function (data) {
            alert('Error occurred.');
        }

    });

});
于 2013-05-14T01:29:49.580 回答