Javascript使图像出现在一张幻灯片的选择你自己的冒险，然后消失？

提问者：小点点

Javascript使图像出现在一张幻灯片的选择你自己的冒险，然后消失？

我正在学习JS和建立一个基于选择你自己的冒险文本游戏的项目。

我想要的是，在某些‘幻灯片’上，图像出现与描述文字在上半部分。

它现在的工作方式是通过指向新的幻灯片id的选项来更改幻灯片，新的幻灯片id具有text的新值。然后用它来更新实际的文本元素。我最初的想法是拥有一个空的div，然后在某些幻灯片上使用test.png进行变量更新，并使用.src为div提供一个图像。然而，这只是意味着有一个丑陋的“找不到图像的正方形”显示所有的时间。

然后我想也许在某些幻灯片上，我可以给变量image分配一个数字。这个数字指的是数组或列表中的一个项目，也就是我想要显示的图像。然后showTextNode函数将检查该数字，如果找到该数字，它将用正确的图像追加img子级。然后，移动到下一张幻灯片，孩子将被移除。

我最初尝试添加一个if循环，检查image是否等于一个数字，除了破坏所有内容之外什么也不做！现在，这个解决方案是非常超出我的掌握范围，所以如果有人能指导我到正确的文档或指南或等。。。了解这一点，那将是很棒的！

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet">
    <script defer src="game.js"></script>
    <title>Case Study 1</title>
</head>
<body>
    <div class="container">
        <div class="container-upper">
            <div id="text" class="text">Text</div>
        </div>
        <div class="container-lower">
            <div id="option-buttons" class="btn-grid">
                <button class="btn">Option 1</button>
                <button class="btn">Option 2</button>
                <button class="btn">Option 3</button>
            </div>
        </div>
    </div>
</body>
</html>

JavaScript

const textElement = document.getElementById('text')
const optionButtonsElement = document.getElementById('option-buttons')

let state = {}

function startGame() {
    state = {};
    showTextNode(1);
}

function showTextNode(textNodeIndex) {
    const textNode = textNodes.find(textNode => textNode.id === textNodeIndex);
    textElement.innerText = textNode.text;
    while(optionButtonsElement.firstChild) {
        optionButtonsElement.removeChild(optionButtonsElement.firstChild);
    }

    textNode.options.forEach(option => {
        if(showOption(option)) {
            const button = document.createElement('button');
            button.innerText = option.text;
            button.classList.add('btn')
            button.addEventListener('click', () => selectOption(option));
            optionButtonsElement.appendChild(button);
        }
    })
}

function showOption(){
    return true;
}

function selectOption(option) {
    const nextTextNodeId = option.nextText;
    state = Object.assign(state, option.setState)
    showTextNode(nextTextNodeId)
}

const textNodes = [
    {
        id: 1,
        text: 'Case Study: BioPharma Expansion',
        options: [
            {
                text: 'Start',
                setState: {},
                nextText: 2
            }
        ]
    },
    {
        id: 2,
        text: 'Your client is BioPharma, a multinational healthcare company headquartered in the Netherlands',
        options: [
            {
                text: "I'd like to know more about BioPharma's revenue",
                setState: {},
                nextText: 3
            },
            {
                text: "I'd like to know more about BioPharma's cost structure",
                setState: {},
                nextText: 3
            }   
        ]
    },
    {
        id: 3,
        text: "BioPharma's revenue has increased year on year by 12% since 2014",
        options: [
            {
                text: "What about costs?",
                setState: {},
                nextText: 4
            }
        ]
    },
    {
        id: 4,
        text: "BioPharma's cost structure is shown below in Figure 1",
        options: [
            {
                text: "Here is some stuff",
            }
        ]
    }
]

startGame();

共1个答案

匿名用户

我想到的一个选项是插入一个图像作为div的背景。所以我不完全确定我是否正确理解了您想要实现的目标，但在我看来，根据用户所在的“TextNodes”对象，您可能希望显示一个图像。

为了使代码尽可能接近您提供的内容，我向对象添加了一个“ImageLink”属性，将一个链接作为其值，并在“ShowTextNode”函数中添加了一个三值运算符来查找该属性，如果该属性没有未定义，那么它将把该链接作为背景图像添加到一个带有id=“image”的div中，否则它将显示设置为None。

null

const textElement = document.getElementById('text')
const optionButtonsElement = document.getElementById('option-buttons')

let state = {}

function startGame() {
    state = {};
    showTextNode(1);
}

function showTextNode(textNodeIndex) {
    const textNode = textNodes.find(textNode => textNode.id === textNodeIndex);
    textElement.innerText = textNode.text;
    
    while(optionButtonsElement.firstChild) {
        optionButtonsElement.removeChild(optionButtonsElement.firstChild);
    }
  
    // ternary operator that looks for the imageLink property
            textNode.imageLink ? document.getElementById('image').style.backgroundImage = `url(${textNode.imageLink})` : document.getElementById('image').style.display = "none"

    textNode.options.forEach(option => {

    // if statement removed as it will always returns true since that is the purpose of the function called
            const button = document.createElement('button');
            button.innerText = option.text;
            button.classList.add('btn')
            button.addEventListener('click', () => selectOption(option));
            optionButtonsElement.appendChild(button);
    })
}

// function commented as it's purpose seems redundant
/*
function showOption(){
    return true;
}
*/

function selectOption(option) {
    const nextTextNodeId = option.nextText;
    state = Object.assign(state, option.setState)
    showTextNode(nextTextNodeId)
}

const textNodes = [
    {
        id: 1,
        text: 'Case Study: BioPharma Expansion',
      // image link propert
      // change the link as you see fit
                imageLink: "https://image.flaticon.com/icons/png/128/1828/1828743.png",
        options: [
            {
                text: 'Start',
                setState: {},
                nextText: 2
            }
        ]
    },
    {
        id: 2,
        text: 'Your client is BioPharma, a multinational healthcare company headquartered in the Netherlands',
        options: [
            {
                text: "I'd like to know more about BioPharma's revenue",
                setState: {},
                nextText: 3
            },
            {
                text: "I'd like to know more about BioPharma's cost structure",
                setState: {},
                nextText: 3
            }   
        ]
    },
    {
        id: 3,
        text: "BioPharma's revenue has increased year on year by 12% since 2014",
        options: [
            {
                text: "What about costs?",
                setState: {},
                nextText: 4
            }
        ]
    },
    {
        id: 4,
        text: "BioPharma's cost structure is shown below in Figure 1",
        options: [
            {
                text: "Here is some stuff",
            }
        ]
    }
]

startGame();

<div class="container">
  <div class="container-upper">
    <div id="text" class="text">Text</div>
    
    <!-- Container where the image will be inserted -->
    <div id="image" style="width: 150px; height: 150px; background-repeat: no-repeat"></div>
    
  </div>
  <div class="container-lower">
    <div id="option-buttons" class="btn-grid">
      <button class="btn">Option 1</button>
      <button class="btn">Option 2</button>
      <button class="btn">Option 3</button>
    </div>
  </div>
</div>