从 ajax 成功更改多个 HTML 元素答案

【问题标题】：Change multiple HTML element from ajax success从 ajax 成功更改多个 HTML 元素
【发布时间】：2020-09-24 13:49:35
【问题描述】：

我有一个关于成功功能的 ajax，我在满足某些条件时编写了一些 css 颜色更改任务。我正在使用 "document.getElementById" 更改 html 元素的颜色。我的问题是我应该有多个数据对象应该更改 html 元素，但在这种情况下，它始终是最后一个对象。

我的成功函数：

            success: function (data) {
            $.each(data, function (index, value) {
                if (userId == value.ApplicationUserId && postId == value.PostId && value.IsLiked == 1) {
                    document.getElementById(likeId).style.color = "red";
                }
                if (userId == value.ApplicationUserId && postId == value.PostId && value.IsLiked == 2) {
                    document.getElementById(dislikeId).style.color = "red";
                }
                if (userId == value.ApplicationUserId && postId == value.PostId && value.IsHelpfull == 1) {
                    document.getElementById(helpfulId).style.color = "red";
                }
            });
        }

而且我的元素 ID 都是唯一的并且是动态生成的。而且我在 documet.getElementById 中传递了正确的 ID。如何更改所有满足条件的元素？

【问题讨论】：

你确定value.IsHelpfull 不是错字吗？
我有点迷茫，要不要全部三个元素都改？
@leun4m 它不是此代码的类型。所有地方都相同。
@pilchard 如果他们都满足的话。但是喜欢和不喜欢不能同时是1和2。所以只有两个会改变。
应该是likeId 还是likedId 和dislikeId 一样

标签： javascript ajax asp.net-ajax

【解决方案1】：

鉴于您在 cmets 中的说明，您似乎想要这样的东西。

首先，由于所有条件的前两个条件都相同，您可以检查一次，然后将其他检查嵌套在其中。

if (userId == value.ApplicationUserId && postId == value.PostId) {
    ...
}

然后，您需要检查两个不同的案例：

是否喜欢或不喜欢。由于这些是互斥的，您可以将它们与 else 结合使用。

if (value.IsLiked == 1) {
    document.getElementById(likeId).style.color = "green"; // Liked color
} else if (value.IsLiked == 2) {
    document.getElementById(dislikeId).style.color = "red"; // Disliked color
}

如果有帮助

if (value.IsHelpfull == 1) {
  document.getElementById(helpfulId).style.color = "blue"; // Helpful color
}

success: function (data) {
  $.each(data, function (index, value) {
    if (userId == value.ApplicationUserId && postId == value.PostId) {

      if (value.IsLiked == 1) {
        document.getElementById(likeId).style.color = "green";
      } else if (value.IsLiked == 2) {
        document.getElementById(dislikeId).style.color = "red";
      }

      if (value.IsHelpfull == 1) {
        document.getElementById(helpfulId).style.color = "blue";
      }

    }
  });
}

ps：检查您对helpful 的拼写是否始终一致且正确。

【讨论】：