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 の変更をアクティブにチェックしておらず、ループなどでコードを再実行していません。あなたのコードは静的であるため、実行されてイベントをバインドしようとすると、.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任意の要素に属性を追加し、ページの最後でスクリプトを1 回実行するだけです。

于 2013-07-09T02:57:20.723 に答える
0

switchClass() を使用する必要があります。

switchClass(removeClassName, addClassName).

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

そして、送信をクリック機能に変更すると、すべてが正常に機能します..

于 2013-07-10T08:12:18.633 に答える