给每张图片一个点击边框

Question

我想给图片加边框。但是有很多图片，只有我点击的那些应该有边框。我可以给每张图片一个单独的 ID，然后为每张图片写一个脚本，但这会太多了，因为还会有更多的图片出现。我尝试了多种方法，但现在代码如下所示：

<!DOCTYPE html>

<!-- ... -->

<div>
    <img src="Champs/Vayne.png" class="vayne">
    <img src="Champs/Nasus.png" class="nasus">
</div>
<!-- ... -->

<script>

function Border()
{
    document.querySelector(".vayne").addEventListener("click", function changeBorder
    {
        changeBorder.target.style.border = "solid";
    });
}

</script>

我试过将背景改为红色，所以我猜事件监听器那一行一定有错误，但我不知道那里出了什么问题。

Answer 1

这会在您单击图像时为图像添加边框：我们创建了一个函数来为元素添加边框，并在单击元素时调用它（使用 onclick）

<img src="Champs/Vayne.png" onclick="mark(this)">

function mark(el) {
    el.style.border = "1px solid blue";
}

http://jsfiddle.net/8QGkq/

Answer 2

问题是您将用于将事件侦听器附加到图像的代码包装在一个永远不会执行的函数中。而且你的回调函数中的语法是错误的，你缺少参数周围的括号。

您必须为页面上的每张图片添加一个事件侦听器。

您可以保留代码并手动调用该函数：

<script>

function Border()
{
    document.querySelector(".vayne").addEventListener("click", function (changeBorder)
    {
        changeBorder.target.style.border = "solid 1px";
    });
}

Border(); // call the function
</script>

或者直接删除功能，只留下内容：

<script>
document.querySelector(".vayne").addEventListener("click", function (changeBorder)
{
    changeBorder.target.style.border = "solid 1px";
});
</script>

更新：

此答案中给出了仅使用单个事件处理程序的更好的解决方案：

这个答案还表明，仅仅设置边框样式是行不通的，因为边框宽度也需要设置为大于零的值。我相应地更新了我的答案。

Answer 3

使用delegated event handler and use the target of the event分配边框：

document.addEventListener('click',function(event){
  if(event.target.nodeName == "IMG"){
    //note style includes the width and color as well as the border type
    event.target.style.border = "1px solid red";
  } 
});

这样您就不必担心添加的图像数量，事件会因单击任何内容而触发，并且仅适用于 <img> 由于 nodeName 检查而出现的元素。

当然，您可以使用其他检查，如 class，或其他一些数据点来确定枯萎或不应用样式。

例如，您可以使用 data-* attribute 来决定应该定位哪些元素

//img using a data-* attribute
//<img src="..." data-clickborder="1">

document.addEventListener('click', function(event) {
  if (event.target.dataset["clickborder"] == 1) {
    event.target.style.border = "1px solid red";
  }
});

document.addEventListener('click', function(event) {
  if (event.target.dataset["clickborder"] == "1") {
    event.target.style.border = "1px solid red";
  }
});

<img src="https://via.placeholder.com/90">

<img data-clickborder="1" src="https://via.placeholder.com/64">

<img data-clickborder="1" src="https://via.placeholder.com/72">

<img src="https://via.placeholder.com/81">

注意你的代码，不正确的语法无法忍受，没有提供边框大小，而只是提供边框类型。即使代码正确选择了元素并应用了样式，也不会显示任何边框。

Answer 4

首先要整理您的代码，我建议使用 jQuery，因为它大大减少了将函数和事件应用于 DOM 元素所需的代码行数，您可以通过添加此标签： <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

然后使用另一个脚本，您可以为每个 img 元素添加一个 "on click" 函数

<script>
$("img").each(function() {
$(this).on("click", function() {
$(this).css("border", "1px solid black")
});
});
</script>

给每张图片一个点击边框

give each picture a border on click

html

javascript

events

function

border