Question

我想创建一个“添加到收藏夹”＆amp; “从收藏中删除。”

当我添加收藏夹时，我会更改要移除的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

我建议你更改类而不是id，因为id必须是唯一的。

或者你总是可以使用HTML5 data attribute，你可以将它用于CSS样式（使用属性选择器）和JS使用（使用数据集或jQuery的.data（）方法）。 see

示例：

HTML

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

vanilla javascript

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

顺便说一句你如何获得id是错误的 -

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

您必须使用

vanilla 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/>

更有意义的是有一个按钮来添加收藏夹，还有一个按钮来删除收藏夹。您只需隐藏删除按钮，直到单击添加，反之亦然。

喜欢这个......

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>

“添加到收藏夹/删除” - Ajax无法正常工作

2 个答案: