添加/删除按钮 Ajax 只显示一个答案

【问题标题】：Add/Remove button Ajax only show one添加/删除按钮 Ajax 只显示一个
【发布时间】：2021-03-27 22:55:55
【问题描述】：

我有 2 个带有这个 ajax 的按钮，它们都显示在页面上，我怎样才能让它只显示“添加到收藏夹”按钮，当我点击它时，“从收藏夹中删除”按钮会出现？

function Fav(gameId) {
  var url = '@Url.Action("AddToCollection", "UserCollection")';
  $.ajax({
    url: url,
    type: 'GET',
    data: {
      gameId: gameId,
    },
  });
};

function UnFav(gameId) {
  var url = '@Url.Action("RemoveFromCollection", "UserCollection")';
  $.ajax({
    url: url,
    type: 'GET',
    data: {
      gameId: gameId
    },
  });
};

<button class="btn-link" onclick="Fav(@Model.Id)"><i class="fa fa-heart"></i>Add To Collection</button>

<button class="btn-link " onclick="UnFav(@Model.Id)"><i class="fa fa-heart-broken"></i>Remove From Collection</button>

【问题讨论】：

当您为产品生成html时，您需要检查它是否在收藏列表中，您需要根据该数据显示按钮。
我该怎么做？
在您的代码中，我们看不到您如何将这些数据存储在数据库中。您可能将该数据存储在UserCollection 中。因此，当迭代该数据时，您可以将一个类添加到按钮的类列表中。例如，您可以添加 hidden 类名，这将使按钮 display: none;

标签： javascript c# ajax asp.net-mvc razor

【解决方案1】：

试试这样的。

干燥（不要重复自己）

const urls = {
  "AddToCollection": '@Url.Action("AddToCollection","UserCollection")',
  "RemoveFromCollection": '@Url.Action("RemoveFromCollection","UserCollection")'
}

function Fav(gameId, action) {
  $.ajax({
    url: urls[action],
    type: 'GET',
    data: {
      gameId: gameId,
    },
  });
};

$(function() {
  const whichButton = "AddToCollection"; // set which one to show here using whatever method
  
  $(".btn-link[data-action="+whichButton+"]").show(); 
  $(".btn-link").on("click", function() {
    Fav(this.dataset.id, this.dataset.action)
    $(this).siblings().hide();
  });
});

.hide { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="favDiv">
  <button class="btn-link hide" data-action="AddToCollection" data-id=""><i class="fa fa-heart"></i>Add To Collection</button>
  <button class="btn-link hide" data-action="RemoveFromCollection" data-id=""><i class="fa fa-heart-broken"></i>Remove From Collection</button>
</div>

【讨论】：

【解决方案2】：

这是我一直在寻找的最终结果

const urls = {
  "AddToCollection": '@Url.Action("AddToCollection","UserCollection",new { gameId = Model.Id })',
  "RemoveFromCollection": '@Url.Action("RemoveFromCollection","UserCollection",new { gameId = Model.Id })'
}

function Fav(gameId, action) {
  $.ajax({
    url: urls[action],
    type: 'GET',
    data: {
      gameId: gameId,
    },
  });
};

$(function() {
  const whichButton = "AddToCollection"; // set which one to show here using whatever method

  $(".btn-link[data-action=" + whichButton + "]").show();
  $(".btn-link").on("click", function() {
    Fav(this.dataset.id, this.dataset.action)
    $(this).siblings().hide();
    $(this).siblings().show();
    $(".btn-link[data-action=" + whichButton + "]").hide();
  });
});

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="favDiv">
  <button class="btn-link hide" data-action="AddToCollection" data-id=""><i class="fa fa-heart"></i>Add To Collection</button>
  <button class="btn-link hide" data-action="RemoveFromCollection" data-id=""><i class="fa fa-heart-broken"></i>Remove From Collection</button>
</div>

【讨论】：