javascript JS根据在h1标记中找到的特定文本更改HTML img源代码

8fsztsew 于 2023-02-11 发布在 Java

关注(0)|答案(3)|浏览(123)

我也曾发布过一个类似的关于切换HTML文本片段的问题（参见JS Switch HTML content based on specific text included in h1 tag），这些回复对我帮助很大。从这些回复中，我使用了下面的代码来修改HTML文本片段：

<h1>This is about Red Apples</h1>
<span id="colour"></span>

window.addEventListener("load",function(){ 
  const h1 = document.querySelector("h1"),
      description = document.querySelector("#colour"),
      colours = [
        { colour: "red", description: "red description" },
        { colour: "blue", description: "blue description" }
      ]
  
description.innerText = colours.filter(f => h1.innerText.toLowerCase().includes(f.colour))[0]?.description
  },false);

现在我希望修改代码，根据h1标记中包含的一些文本（与我上一篇文章中要求的文本字符串不同）来更改img src。
经过大量的试验和错误，我不知道如何修改这段代码来改变同一页上的图像源代码。到目前为止，我得到的最接近的，但使用"if/else"方法，是：
一个二个一个一个
但是，我还是不能让这个工作。我真的希望有人能帮助!提前感谢!

JavaScript

来源：https://stackoverflow.com/questions/75398886/js-change-html-img-src-based-on-specific-text-found-in-h1-tag

3条答案

按热度按时间

kb5ga3dv1#

据我所知，您的代码中有2个错误。
1 -移除.imageNode。
2 -您需要将文本转换为小写，因为您要获取的对象键是小写的，请使用.toLowerCase()

var map = {
  "red apples": "redapples-image.jpg",
  "blue blueberries": "blueberries-image.jpg",
  "yellow bananas": "yellowbananas-image.jpg",
};

function influenceImage(source, map) {
  if (!source || !map) {
    return false;
  } else {
    let text = source.textContent.toLowerCase() || source.innerText.toLowerCase();3
    for (var word in map) {
      if (map.hasOwnProperty(word) && text.indexOf(word) !== -1) {
        return map[word];
      }
    }
  }
}

document.getElementById("fruitimage").src = influenceImage( document.getElementsByTagName("h1")[0], map);

赞(0）回复(0）举报 2023-02-11

e1xvtsh32#

这应该对你想要达到的目标有效

var map = {
    'red apples': 'redapples-image.jpg',
    'blue blueberries': 'blueberries-image.jpg',
    'yellow bananas': 'yellowbananas-image.jpg'
};

function retImage(source) {
    var imageSource = "default-image.jpg";
    var text = document.getElementsByTagName('h1')[0].innerText;
    for (const [key, val] of Object.entries(map)) {

        if (text.toLowerCase().includes(key)) {

            imageSource = val;
        }
    }
    let el = document.createElement("img");
    el.setAttribute("src", imageSource);
    el.setAttribute("alt", imageSource);
    document.getElementById("fruitimage").appendChild(el);
};

retImage() // function to return image

<h1>This is about Red Apples</h1>
<div id="fruitimage"></div>

赞(0）回复(0）举报 2023-02-11

6vl6ewon3#

👋
我认为你的例子遗漏了一些地方。
1.您仍然需要某种事件侦听器来检查DOM是否完全加载，然后再尝试获取document.getElementById元素的句柄（或者将JS脚本放在dom下面）。

influenceImage名称非常模糊，并没有按照名称所暗示的那样做。

// Utility function.
function getImageSrcByDescription(description) {
  const normalizedDescription = description.toLowerCase().trim()

  // Iterate over the array one item at a time.
  const image = IMAGE_TAGS_PAIRS.find((obj) => {

    // We split the tags by empty space delimiter.
    const tags = obj.tags.split(' ');

    // ... and make sure the provided description will contain all of the tags.
    const isMatchingAllTags = tags.every(tag => normalizedDescription.includes(tag))

    return isMatchingAllTags ? obj : undefined
  })
  
  // If image is found, return the `src` property of the object, if not, fallback.
  return image ? image.src : TAG_NOT_FOUND_IMG
}

// Act on page load.
window.addEventListener("load", function() {
  // Get handles for both description & image elements.
  const fruitDescriptionElem = document.querySelector('#fruit-description');
  const fruitImageElem = document.querySelector("#fruit-image");

  const description = fruitDescriptionElem.innerText
  const imageSrc = getImageSrcByDescription(description)

  if (imageSrc) {
    fruitImageElem.alt = 'New Image'
    fruitImageElem.src = imageSrc
  }
})

这里有把小提琴给你玩。
https://jsfiddle.net/xjL79zef/1/

赞(0）回复(0）举报 2023-02-11

我来回答

javascript JS根据在h1标记中找到的特定文本更改HTML img源代码

3条答案

相关问题

热门标签

最新问答