Question

如果每个元素没有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中，我使两个按钮id都相同，因为它是图像的唯一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是错误的，我认为如果有人可以给我代码，就可以解决找到class = angle-up和id = 1的类，将其更改为checked

我可以使两个ID不相同，但是我应该将该ID存储在其他位置，然后通过代码获取它，但我不知道该怎么做，因此对我来说更容易

Answer 1

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>

Answer 2

使用$(this)定位点击的按钮，而不需要id甚至一个类：

$("button").click( function(){ $(this).toggleClass("clicked") })

.clicked{
	background : chartreuse;	
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>1</button>
<button>2</button>

此外，避免使用内联onclick=。使用jQuery绑定点击事件。

Answer 3

id必须唯一，才能引用DOM元素。您可以使用其他ID，也可以使用类。

function vote(vote, id) {
  console.log(vote, id);
}

.daddy {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

#btn1 {
  height: 3em;
  width: 10em;
  color: white;
  background-color: #444444;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#btn2 {
  margin-left: 1em;
  height: 3em;
  width: 10em;
  color: white;
  background-color: pink;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

<div class="daddy">
  <div id="btn1" onclick='vote("up", this.id);'>UP</div>

  <div id="btn2" onclick='vote("down", this.id);'>DOWN</div>
</div>

Answer 4

您可以使用“ .classname”来更改颜色。

$(".fas fa-angle-up $voteup").click(function(){
    $(this).css( "background-color", "red" );

 });

用户单击后使按钮像变颜色

4 个答案: