Question

我有4张具有以下4个ID名称的图像：

“ ObiWan”，“ Luke”，“ Sidious”，“ Maul”；

所有这些都有一个类名：“ images”。

但是使用下面的代码，无论我按哪个图像，它都只会在控制台日志中将“ ObiWan”显示为所有这四个图像的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"));
}

});

Answer 1

// person array
var person = ["ObiWan", "Luke", "Sidious", "Maul"];

// this is event delegate, if your new img.image attach click event handler.
$(document).on("click", ".image", function($e) {
  var id = $($e.currentTarget).attr("id");
  console.log(id);

  // #player
  $("#player").append($("#"+id));
  person.forEach(function(person) {
    if(id === person) { // #player -> not enemy...!
      return;
    }
    // #enemies
    $("#enemies").append($("#"+person));
  });
});

Answer 2

您应将{替换为$(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"));
  }
});

Answer 3

您可以将事件传递给函数，并获取目标元素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名称？

3 个答案: