«Добавить в избранное / удалить» - Ajax не работает - PullRequest
Новая
       9

«Добавить в избранное / удалить» - Ajax не работает

0 голосов
/ 30 мая 2018

Я хочу создать «Добавить в избранное» и «Удалить из избранного».

Когда я добавляю избранное, я меняю идентификатор DIV для удаления.Я могу успешно добавить в избранное, но не могу отменить.

Этот код для добавления 

    $('#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';
        });
    });

Где я не прав?

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

Основная проблема с вашим кодом заключается в том, что вы назначаете обработчик события кнопке, а затем меняете идентификатор этой кнопки, ожидая, что она будет вызывать другой код при нажатии.Это неправильно.

Если вы измените идентификатор элемента, он все равно будет вызывать обработчик событий, который вы изначально присвоили ему.Посмотрите этот пример ... 

$("#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>
0 голосов
/ 30 мая 2018

Я предложил изменить класс вместо идентификатора, поскольку идентификатор должен быть уникальным.

Или вы всегда можете использовать HTML5-атрибут данных , который можно использовать для обоих CSSстилизация (с помощью селектора атрибутов) и использование JS (с набором данных или методом .data () jQuery). см.

Пример:

HTML 

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

ванильный JavaScript 

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

, кстати, как вы получаете идентификаторнеправильно - 

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

Вы должны использовать

ванильный JavaScript 

document.getElementById('RemoveFavoriteButton').id;

jQuery 

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