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>

Answer 1

我不能完全从您的解释中了解您想要的内容，但我想是这样的：

有很多图像和两个空的“盒子”。
单击一个框，然后可以单击图像。
单击图像后，该框将更新。
可选：使其具有动态效果，因此您可以添加任意数量的图像或“盒子”。

为此，您需要：

知道您第一次单击哪个框。
告诉您可以选择的图像，然后单击它们。
使用单击的图像更新原始框。
奖金：向用户提供反馈（突出显示）。

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>

Answer 2

您实际上只在这里实现了过程的一部分。您需要更仔细地考虑程序的流程：

您首先需要处理链接上的点击事件。

您还需要使用户可以单击图像以选择要替换的图像。

然后，您的代码需要能够将单击的图像与单击的链接匹配，以便它知道要进行哪些更改。

在此演示中，我使用addEventListener（即在JS中声明，而不是嵌入HTML中）将您的内联事件处理程序替换为 unobtrusive 事件处理程序。

//variables to hold program state
var selectEnabled = false;
var selectedImage = "";

//handle clicks on links
var links = document.querySelectorAll(".imageLink");
links.forEach(function(lnk) {
  lnk.addEventListener("click", enableImageSelection);
});

function enableImageSelection(e) {
  e.preventDefault(); //stop the hyperlink doing its normal job (i.e. moving to another page)
  selectEnabled = true;
  alert("Please select an image to replace");
  imageSrc = this.querySelector("img").src;
}

//handle clicks on the replaceable images
var clickableImages = document.querySelectorAll(".clickableImage");
clickableImages.forEach(function(img) {
  img.addEventListener("click", loadImage);
});

function loadImage() {
  if (selectEnabled == true) {
    console.log("replacing " + this.src + " with " + imageSrc);
    this.src = imageSrc;
    selectEnabled = false; //image is not clickable again until a link is clicked first.
  }
}

<img class="clickableImage" src="images/image1.png" alt="1" />
<img class="clickableImage" src="images/image2.png" alt="2" />
<img class="clickableImage" src="images/image3.png" alt="3" />
<br/><br/>
<a href="" class="imageLink"><img src="images/image4.png"> Click me</a>
<a href="" class="imageLink"><img src="images/image5.png"> Click me</a>

如何在javascript中的achor标签的特定部分添加图片？

2 个答案: