"Add to Favorite / Remove" - Ajax 不工作

Question

我想创建一个 "Add to favorite" & "Remove from favorite"。

当我添加收藏夹时，我将 DIV 的 ID 更改为删除。我可以成功添加到收藏夹，但我无法撤消。

此代码用于添加

    $('#addToFavoriteButton').click(function (event) {
        var ItemID = $('#addToFavoriteButton').data('itemid');
        event.preventDefault();
        $.post('/system/ajax.php', {
            AddFavID: ItemID 
        }, function (response) {
            document['getElementById']('addToFavorite').id = 'RemoveFavoriteButton';
        });
    });

删除此代码

$('#RemoveFavoriteButton').click(function (event) {
        var ItemID = $('#RemoveFavoriteButton').data('itemid');
        event.preventDefault();
        $.post('/system/ajax.php', {
            RemoveFavbidID: ItemID
        }, function (response) {
            document['getElementById']('RemoveFavoriteButton').id = 'addToFavoriteButton';
        });
    });

我哪里错了？

Answer 1

我建议您更改 class 而不是 ID，因为 ID 必须是唯一的。

或者您可以随时使用 HTML5 data attribute, which you can use for both CSS styling (using attribute selector) and JS use (with dataset or jQuery's .data () method). see

示例：

HTML

<div id="el" data-test="data"></div>

原版javascript

var el = document.getElementById('el');
el.dataset.test // 'data'

顺便说一下你获取id的方式是错误的-

document['getElementById']('RemoveFavoriteButton').id

你必须使用

原版 javascript

document.getElementById('RemoveFavoriteButton').id;

jQuery

$('#RemoveFavoriteButton')attr('id');

Answer 2

您的代码的主要问题是您将事件处理程序分配给按钮，然后更改该按钮的 ID，期望它在单击时触发不同的代码。这是错误的。

如果您更改元素的 ID，它仍会触发您最初分配给它的事件处理程序。看这个例子...

$("#button1").on("click", function() {
  alert("you clicked button 1 - my id is " + this.id);
});

$("#button2").on("click", function() {
  alert("you clicked button 2");
});

// change the ID of #button1 to #button2
$("#button1").attr("id", "button2");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="button1">button 1</button><br/>
<button id="button2">button 2</button><br/>

更有意义的是有一个添加收藏夹的按钮和一个删除收藏夹的按钮。您只需隐藏删除按钮，直到单击添加，然后 vice-versa.

像这样...

var $add = $("#addFavourite");
var $remove = $("#removeFavourite");

$add.on("click", function() {
  $add.hide();
  $remove.show();
  
  var itemId = $add.data("item-id");
  alert("adding item " + itemId);

  // do your AJAX stuff to add the favourite here
  
});

$remove.on("click", function() {
  $add.show();
  $remove.hide();
  
  var itemId = $add.data("item-id");
  alert("removing item " + itemId);

  // do your AJAX stuff to remove the favourite here
  
});

#removeFavourite {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="addFavourite" data-item-id="123">add favourite</button>
<button id="removeFavourite" data-item-id="123">remove favourite</button>

"Add to Favorite / Remove" - Ajax 不工作

"Add to Favorite / Remove" - Ajax not working

javascript

ajax

getelementbyid