javascript - 如何将图像添加到 javascript 中 achor 标记的特定部分？

Question

我有三个图像和两个锚标签。当用户单击任何链接时，用户可以选择任何图像。然后必须将该图像替换为用户单击的锚标记图像。

var control3 = document.getElementById('control1').src;
var control4 = document.getElementById('control2').src;

function getImage(e) {
  fullpath = e.children[0].src;

  var filename = fullpath.replace(/^.*[\\\/]/, '');

  var imageSrc = filename.split("\.")[0] + ".png";

  if (control1 !== fullpath) {
    document.getElementById('control1').src = "images/" + imageSrc;
  }

  if (control2 !== fullpath) {
    document.getElementById('control2').src = "images/" + imageSrc;
  }

  if (control3 !== fullpath) {
    document.getElementById('control3').src = "images/" + imageSrc;
  }
}

<img onclick="getImage(this);" src="images/image1.png" alt="">
<img onclick="getImage(this);" src="images/image2.png" alt="">
<img  onclick="getImage(this);" src="images/image3.png" alt="">

<a href=""><img id="control1" src=""></a>
<a href=""><img id="control2" src=""></a>

标签： javascripthtml

Answer 1

我不完全理解你想要从你的解释中得到什么，但我想它是这样的：

1. 有很多图像和两个空的“盒子”。
2. 单击一个框，您可以单击图像。
3. 当您单击图像时，该框将更新。
4. 可选：使其动态化，因此您可以添加任意数量的图像或“框”。

为此，您需要：

1. 知道你第一次点击的是哪个框。
2. 告诉您可以选择的图像，它们可以被点击。
3. 使用单击的图像更新原始框。
4. 奖励：给用户反馈（亮点）。

var selectedImageId = "";   // 1. Know what box you first clicked on.
const SELECTABLE_CLASS_NAME = 'selectable';

// 1. Know what box you first clicked on.
function selectImage(imageElement) {
  let selectableImagesContanier = document.getElementById('selectables');
   if (selectedImageId && selectedImageId != imageElement.id) {
     let prevSelectedImage = document.getElementById(selectedImageId);
     prevSelectedImage.classList.remove(SELECTABLE_CLASS_NAME);     
   }
     
   selectedImageId = imageElement.id;

   // 4. bonus: give the user feedback (highlights)
   imageElement.classList.add(SELECTABLE_CLASS_NAME);
   selectableImagesContanier.classList.add(SELECTABLE_CLASS_NAME);}

function getImage(imageElement) {
  let selectableImagesContanier = document.getElementById('selectables');

  // 2. Tell the images you can select between that they can be clicked.
  if (selectableImagesContanier.classList.contains(SELECTABLE_CLASS_NAME)) {
    let imageToBeUpdated = document.getElementById(selectedImageId);

    // 3. Update the box with the clicked image.
    imageToBeUpdated.src = imageElement.src;

    // 4. bonus: give the user feedback (highlights)
    selectableImagesContanier.classList.remove(SELECTABLE_CLASS_NAME);
    imageToBeUpdated.classList.remove(SELECTABLE_CLASS_NAME);
    imageToBeUpdated.classList.add('image-shown');
  }
}

img {
  width: 50px;
  height: 50px;
  border: 2px solid;
  border-color: transparent;
}

#selectables.selectable > img,
img.selectable {
  border-color: lightblue;
  cursor: pointer;
}

.selected-image-container {
  margin-top: 1rem;
}

.selected-image-container > img {
  cursor: pointer;
  background-color: lightgrey;
}

.selected-image-container > img.image-shown {
  background-color: transparent;
}

<div id="selectables">
  <img onclick="getImage(this)" src="https://picsum.photos/id/21/50/50" alt="">
  <img onclick="getImage(this)" src="https://picsum.photos/id/31/50/50" alt="">
  <img onclick="getImage(this)" src="https://picsum.photos/id/41/50/50" alt="">
</div>

<div class="selected-image-container">
  <img id="control1" src="" onclick="selectImage(this)">
  <img id="control2" src="" onclick="selectImage(this)">
</div>