0

我正在尝试使用 jQuery 和 AJAX 提交和处理表单。该表单用于喜欢/不喜欢按钮。当用户单击“喜欢/不喜欢”按钮时,表单被提交(我在JSFIDDLE中注释掉了我的 AJAX ),然后将表单更改为相反的内容并更改按钮文本。但是,由于某种原因,表单和按钮只会更改一次。我究竟做错了什么?我希望用户能够点击喜欢,然后不喜欢,如果他们愿意,可以再次喜欢。

我的代码:

$(".like-form").submit(function () {

    var dataString = $(this).serialize();
    var $this = $(this);

    //Ajax that submits the form to like.php

    $this.attr('class', 'unlike-form');
    $this.find('.like-button').html('Unlike');

    return false;

});

$(".unlike-form").submit(function () {

    var dataString = $(this).serialize();
    var $this = $(this);

    //Ajax that submits the form to unlike.php

    $this.attr('class', 'like-form');
    $this.find('.like-button').html('Like');

    return false;

});
4

3 回答 3

2

您正在将提交事件绑定到一个不存在的表单,因为您正在更改现有表单的类。正确的方法是:

$("form").submit(function () {

    var $this = $(this);
    var isLiked = $this.hasClass('unlike-form');
    var dataString = $this.serialize();

    if ( isLiked ) {
        //Ajax that submits the form to unlike.php
    } else {
        //Ajax that submits the form to like.php
    }

    $this.toggleClass('like-form unlike-form');
    $this.find('.like-button').html(isLiked ? 'Like' : 'Unlike');

    return false;

});

我建议给表单一个特定的属性,以便您可以更直接地选择它。

于 2013-07-09T02:53:31.840 回答
1

这是因为'.unlike-form'你的代码运行时没有。

jQuery 不会主动检查您的 DOM 是否有更改并在 lopp 或任何东西中重新运行代码。你的代码是静态的,所以当它被执行并尝试绑定事件时,它会找到一个.like-form并绑定一个点击事件。没有'.unlike-form'。

此外,您的代码正在更改元素的类,因此即使您让绑定代码工作,因为它仍然是同一个表单元素,它仍然.like-form具有附加到它的原始事件代码。

IMO,你的整个方法有点不对劲。我会推荐更像这样的东西(未经测试):

<button class="like-button is-unlike" data-like-button data-user-id="1" data-post-id="2">Like</button>

<script>
  var $likeButtons = $('[data-like-button]');

  $likeButtons.on('click', function() {
    var $likeButton = $(this);
    var isLiked = $likeButton.hasClass('is-liked');

    var data = {
      mode: isLike ? 'like' : 'unlike'
      userId: $likeButton.data('user-id'),
      postId: $likeButton.data('post-id') 
    }

    // do async request here

    if (isLiked) {
      $likeButton
        .removeClass('is-liked')
        .addClass('is-unliked')
        .text('Unlike');
    } else {
      $likeButton
        .removeClass('is-unliked')
        .addClass('is-liked')
        .text('Like');
    }

    return false;
  });
</script>

编辑:使我的推荐代码可重用。只需data-like-button在任何元素上添加一个属性,然后在页面末尾运行一次脚本。

于 2013-07-09T02:57:20.723 回答
0

您应该使用 switchClass()。

switchClass(removeClassName, addClassName).

参考:http ://api.jqueryui.com/switchClass/

并将提交更改为单击功能,一切都会正常工作..

于 2013-07-10T08:12:18.633 回答