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