从ajax成功更改多个HTML元素

问题描述

我在成功函数上有一个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。如何更改所有满足条件的元素？

解决方法

鉴于您在评论中的澄清，似乎您想要这样的东西。

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

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

然后，您要检查两种情况：

1. 喜欢或不喜欢它。由于这些是互斥的，因此可以将它们与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
}

1. 如果有帮助

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的拼写是否一致和正确。