时间戳

首页 > 解决方案 > 用户点击后让like按钮改变颜色

javascript - 用户点击后让like按钮改变颜色

问题描述

如果每个元素没有 2 个相同的 id，这对我来说并不难解决

我在数据库中有自己的 id 的图像，这是类似的按钮

<a id='$id' class='fas fa-angle-up $voteup' onclick='vote(\"up\",this);'></a>

这是不喜欢的按钮

 <a id='$id' class='fas fa-angle-down $votedown' onclick='vote(\"down\",this);'></a>

在 php 中，我已经使两个按钮 ids = 相同，因为它是图像的唯一 id，后者在数据库中基于该 ID，它通过此代码发布到数据库

function vote(vote, val) {
    var params = {"vote": vote, "id": val.id};
    $.ajax({
        data:  params,
        url:   'vote.php',
        type:  'post',
        success:  function (response) {
            // code
        }
    });            
}

其他人告诉我，对 2 个元素使用相同的 id 是错误的

我可以使两个 id 不一样，但是我需要将该 id 存储在其他地方，然后通过代码获取它，我不知道该怎么做，所以这对我来说更容易

标签： javascriptjquerycss

解决方案

ID 必须是唯一的。使用一个类或两个不同的 ID -

$("a.$voteup")

和

$("a.$votedown")

应该管用

但这是推荐的

function setActive($but) {
  $(".vote").removeClass("active");
  $but.addClass("active")
}


$(".vote").on("click", function(e) {
  e.preventDefault();
  var $but = $(this);
  var params = {
    "vote": this.id === "voteup" ? "up" : "down",
    "id": $(this).closest("div").attr("id")
  };
  setActive($but); // remove when ajax is available
  console.log("about to vote",params)
  $.ajax({
    data: params,
    url: 'vote.php',
    type: 'post',
    success: function(response) {
      setActive($but);
     },
     error: function(jxhr) { console.lig("error", jxhr)
      }
  });
});
#voteup.active { background-color: green }
#votedown.active { background-color: red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous" />
<div id="$id">
  <a id='voteup'   class='fas fa-angle-up vote'></a>
  <a id='votedown' class='fas fa-angle-down vote'></a>
</div>

推荐阅读