Javascript 为什么下面的代码只提取第一个图像的ID名称？

我有4张图像，其中包含以下4个id名称：

“欧比旺”、“卢克”、“西迪厄斯”、“摩尔”

它们都有一个类名：“images”

但是使用下面的代码，无论我按下哪个图像，它都只在控制台日志中显示“ObiWan”作为所有4个图像的ID

select = $(".image").one("click", function() {


console.log(select.attr('id'));

if (select.attr("id")==="ObiWan"){
    $("#player").append($("#ObiWan"));
    $("#enemies").append($("#Luke"));
    $("#enemies").append($("#Sidious"));
    $("#enemies").append($("#Maul"));
} else if (select.attr("id")==="Luke"){
    $("#player").append($("#Luke"));
    $("#enemies").append($("#ObiWan"));
    $("#enemies").append($("#Sidious"));
    $("#enemies").append($("#Maul"));
} else if (select.attr("id")==="Sidious"){
    $("#player").append($("#Sidious"));
    $("#enemies").append($("#ObiWan"));
    $("#enemies").append($("#Luke"));
    $("#enemies").append($("#Maul"));
} else if (select.attr("id")==="Maul"){
    $("#player").append($("#Maul"));
    $("#enemies").append($("#ObiWan"));
    $("#enemies").append($("#Luke"));
    $("#enemies").append($("#Sidious"));
}

});

---

您应该将select替换为

$（this）

，如下所示：

$(".image").one("click", function (e) {
  var imageID = e.target.id;
  console.log(imageID);
  if (imageID === "ObiWan") {
    $("#player").append($("#ObiWan"));
    $("#enemies").append($("#Luke"));
    $("#enemies").append($("#Sidious"));
    $("#enemies").append($("#Maul"));
  } else if (imageID === "Luke") {
    $("#player").append($("#Luke"));
    $("#enemies").append($("#ObiWan"));
    $("#enemies").append($("#Sidious"));
    $("#enemies").append($("#Maul"));
  } else if (imageID === "Sidious") {
    $("#player").append($("#Sidious"));
    $("#enemies").append($("#ObiWan"));
    $("#enemies").append($("#Luke"));
    $("#enemies").append($("#Maul"));
  } else if (imageID === "Maul") {
    $("#player").append($("#Maul"));
    $("#enemies").append($("#ObiWan"));
    $("#enemies").append($("#Luke"));
    $("#enemies").append($("#Sidious"));
  }
});

---

您应该将select替换为

$（this）

，如下所示：

$(".image").one("click", function (e) {
  var imageID = e.target.id;
  console.log(imageID);
  if (imageID === "ObiWan") {
    $("#player").append($("#ObiWan"));
    $("#enemies").append($("#Luke"));
    $("#enemies").append($("#Sidious"));
    $("#enemies").append($("#Maul"));
  } else if (imageID === "Luke") {
    $("#player").append($("#Luke"));
    $("#enemies").append($("#ObiWan"));
    $("#enemies").append($("#Sidious"));
    $("#enemies").append($("#Maul"));
  } else if (imageID === "Sidious") {
    $("#player").append($("#Sidious"));
    $("#enemies").append($("#ObiWan"));
    $("#enemies").append($("#Luke"));
    $("#enemies").append($("#Maul"));
  } else if (imageID === "Maul") {
    $("#player").append($("#Maul"));
    $("#enemies").append($("#ObiWan"));
    $("#enemies").append($("#Luke"));
    $("#enemies").append($("#Sidious"));
  }
});

---

您可以将事件传递给函数并获取目标元素ID

select = $(".image").on("click", function(e) {
    console.log(e.target.id);
    if (e.target.id==="ObiWan"){
        $("#player").append($("#ObiWan"));
        $("#enemies").append($("#Luke"));
        $("#enemies").append($("#Sidious"));
        $("#enemies").append($("#Maul"));
    } else if (e.target.id==="Luke"){
        $("#player").append($("#Luke"));
        $("#enemies").append($("#ObiWan"));
        $("#enemies").append($("#Sidious"));
        $("#enemies").append($("#Maul"));
    } else if (e.target.id==="Sidious"){
        $("#player").append($("#Sidious"));
        $("#enemies").append($("#ObiWan"));
        $("#enemies").append($("#Luke"));
        $("#enemies").append($("#Maul"));
    } else if (e.target.id==="Maul"){
        $("#player").append($("#Maul"));
        $("#enemies").append($("#ObiWan"));
        $("#enemies").append($("#Luke"));
        $("#enemies").append($("#Sidious"));
    }
});

---

您可以将事件传递给函数并获取目标元素ID

select = $(".image").on("click", function(e) {
    console.log(e.target.id);
    if (e.target.id==="ObiWan"){
        $("#player").append($("#ObiWan"));
        $("#enemies").append($("#Luke"));
        $("#enemies").append($("#Sidious"));
        $("#enemies").append($("#Maul"));
    } else if (e.target.id==="Luke"){
        $("#player").append($("#Luke"));
        $("#enemies").append($("#ObiWan"));
        $("#enemies").append($("#Sidious"));
        $("#enemies").append($("#Maul"));
    } else if (e.target.id==="Sidious"){
        $("#player").append($("#Sidious"));
        $("#enemies").append($("#ObiWan"));
        $("#enemies").append($("#Luke"));
        $("#enemies").append($("#Maul"));
    } else if (e.target.id==="Maul"){
        $("#player").append($("#Maul"));
        $("#enemies").append($("#ObiWan"));
        $("#enemies").append($("#Luke"));
        $("#enemies").append($("#Sidious"));
    }
});

---

---

它们都有类

图像

，但您可以选择

。图像

。这是个问题吗？使用

$（this.attr（'id'）

而不是

select.attr（）

I使用.image调用名为images的类。和$（这）并不能解决问题。请访问所有具有类

图像

，但您选择

。图像

。这是个问题吗？使用

$（this.attr（'id'）

而不是

select.attr（）

I使用.image调用名为images的类。和$（此）不能解决问题。请访问并缓存ID，使用$（此）返回相同的结果。这并不能解决问题$（这）指的是同一个选择对象。@ShahriarFirozEdited@OmidNikrah，谢谢你的编辑。是的，这也行。代码中缺少的主要内容是，我没有使用事件处理程序方法。它基本上完成了交易。并使用$缓存ID（this）返回相同的结果。这并不能解决问题$（这）指的是同一个选择对象。@ShahriarFirozEdited@OmidNikrah，谢谢你的编辑。是的，这也行。代码中缺少的主要内容是，我没有使用事件处理程序方法。基本上就是这样。如果你想改进代码，那么我想说的是还要修改不可缩放的

#敌人

append。使用阵列输出敌人。@A.Lau我同意你的观点。。哈哈哈。。我试试看！谢谢你@seunggabi。这个很有魅力！：）谢谢你的意见。Lau@ShahriarFiroz如果这回答了您的问题，请记住单击勾号。如果您要改进代码，那么我建议您也更改不可缩放的

#敌人

附加。使用阵列输出敌人。@A.Lau我同意你的观点。。哈哈哈。。我试试看！谢谢你@seunggabi。这个很有魅力！：）谢谢你的意见。Lau@ShahriarFiroz如果这回答了你的问题，记得点击勾号。