Question

所以基本上我需要做的是从我当前所在的页面获取每个图像（在这种情况下，我有2个），我需要插入一个按钮。我尝试的方法是针对所有图像，并在其父div中放置一个按钮。我尝试使用以下代码实现此目的：

<!DOCTYPE html>
<html>
<head>
<style>
.container {
    position: relative;
    width: 100%;
    max-width: 400px;
}

.container img {
    width: 100%;
    height: auto;
}

.container .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
}

.container .btn:hover {
    background-color: black;
}
</style>
</head>
<body>


<div class="container">
  <img src="123.png">
</div>

<div class="container">
  <img src="223.png">
</div>



<script type="text/javascript">
var imgscount = document.querySelectorAll("img")
var imgs_array = [...imgscount]; 


for(var i = 0; i< document.images.length; i++)
    {
        var imgs = document.querySelector("img");
        for (var j = 0; j < imgs_array.length-1; j++)
        {
            imgs.parentElement.innerHTML = imgs.parentElement.innerHTML +'<button class="btn">Button</button>';
        };

    };
</script>

</body>
</html>

虽然imgs.parentElement.innerHTML = imgs.parentElement.innerHTML +'<button class="btn">Button</button>';在同一个DIV中创建了两个按钮，而不是每个DIV创建一个按钮。这image应该更好地解释我想在这里实现的目标。

Answer 1

只需删除此for循环

        for (var j = 0; j < imgs_array.length-1; j++)

Answer 2

一个简单的循环可以解决问题，我手动绘制圆圈来替换图像

var images = document.querySelectorAll("img");

for ( var i = 0; i < images.length; i++ ) {
  images[i].parentElement.innerHTML += '<button class="btn">Button</button>';
}

.container {
    position: relative;
    /*
    width: 100%;
    max-width: 400px;
    */
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border-width: 3px;
    border-color: black;
    border-style: solid;
}

.container img {
    width: 100%;
    height: auto;
}

.container .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-color: #555;
    color: white;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    text-align: center;
}

.container .btn:hover {
    background-color: black;
}

<div class="container">
  <img src="123.png">
</div>

<div class="container">
  <img src="223.png">
</div>

在<img/>代码

2 个答案: