我相信这比我想做的更容易,但是—我需要根据按下的按钮来改变段落.我想使用与我点击更改main—img相同的按钮.

重申一下,我的目标是:如果我单击一个按钮,例如Execucher,我希望映像更改为执行器映像(就像我已经设置的那样),并希望subClassDesc更改为我需要的适当的子类信息.

这是HTML(我不认为Mainbox信息与这个问题非常相关,所以如果你愿意的话,可以忽略它--我只需要知道如何正确地更改所述信息).

    <div id="imgContain">
        <img id="main-img" src="default.png">
    </div>
    <div id="mainBox">
        <div class="tabMain">
            <button class="tablinks active" onclick="mainTab(event, 'Overview')" id="defaultOpen">Overview</button>
            <button class="tablinks" onclick="mainTab(event, 'Subclasses')">Subclasses</button>
            <button class="tablinks" onclick="mainTab(event, 'Spells')">Spells</button>
        </div>

        <div id="Overview" class="tabcontentMain">
            <h3>Overview</h3>
            <p>blablabla.</p>
            <p id="subclassDesc">
                <h3>Insert Subclass Here</h3>
                insert subclass info here
            </p>    
        </div>
        <div id="Subclasses" class="tabcontentMain">
            <h3>Subclasses</h3>
            <p>
                <button id="subclass" onclick="changeImg('./assets/010.-Arbalest.png')">Arbalest</button>
                <br><br>
                <button id="subclass" onclick="changeImg('./assets/011.-Dreadnaught.png')">Dreadnought</button>
                <br><br>
                <button id="subclass" onclick="changeImg('./assets/012.-Executioner.png')">Executioner</button>
                <br><br>
                <button id="subclass" onclick="changeImg('./assets/013.-Lancer.png')">Lancer</button>
                <br><br>
                <button id="subclass" onclick="changeImg('./assets/014.-Titan.png')">Titan</button>
            </p>
        </div>

这是Javascript


function changeImg(uri) {
    var image = document.getElementById('main-img');

    image.src = uri;
}

function insertTxt() {
    const button = document.getElementById('subclass');
    const p = document.getElementById('subclassDesc');

//what do i do here? Do i even need this?//
}

我只是需要答案,我对Javascript非常陌生,并不完全理解everything.我都不知道该怎么处理这个函数. 我需要其他声明吗?如何在同一个函数上使用不同的参数来完成所有这些工作?

推荐答案

从你的问题来看,并不完全清楚你想从哪里获得子类信息,所以这里有一点我的即兴创作. 希望能帮上忙.

const info = {
  'Arbalest': {
    text: 'Arbalest is awesome',
    url: './assets/010.-Arbalest.png'
  },
  'Dreadnought': {
    text: 'Dreadnought is awesome',
    url: './assets/011.-Dreadnaught.png',
  },
  'Executioner': {
    text: 'Executioner is awesome',
    url: './assets/012.-Executioner.png',
  },
  'Lancer': {
    text: 'Lancer is awesome',
    url: './assets/013.-Lancer.png',
  },
  'Titan': {
    text: 'Titan is awesome',
    url: './assets/014.-Titan.png',
  }
};

function onSubclassButtonClick(button) {
  const subclassName = button.innerText;
  const subclassData = info[subclassName];

  var image = document.getElementById('main-img');
  image.src = subclassData.url;

  const p = document.getElementById('subclassDesc');
  p.innerHTML = `<h3>${subclassName}</h3>${subclassData.text}`;
}
<div id="imgContain">
  <img id="main-img" src="default.png">
</div>
<div id="mainBox">
  <div class="tabMain">
    <button class="tablinks active" onclick="mainTab(event, 'Overview')" id="defaultOpen">Overview</button>
    <button class="tablinks" onclick="mainTab(event, 'Subclasses')">Subclasses</button>
    <button class="tablinks" onclick="mainTab(event, 'Spells')">Spells</button>
  </div>

  <div id="Overview" class="tabcontentMain">
    <h3>Overview</h3>
    <p>blablabla.</p>
    <p id="subclassDesc">
      <h3>Insert Subclass Here</h3>
      insert subclass info here
    </p>
  </div>
  <div id="Subclasses" class="tabcontentMain">
    <h3>Subclasses</h3>
    <p>
      <button onclick="onSubclassButtonClick(this)">Arbalest</button>
      <br><br>
      <button onclick="onSubclassButtonClick(this)">Dreadnought</button>
      <br><br>
      <button onclick="onSubclassButtonClick(this)">Executioner</button>
      <br><br>
      <button onclick="onSubclassButtonClick(this)">Lancer</button>
      <br><br>
      <button onclick="onSubclassButtonClick(this)">Titan</button>
    </p>
  </div>

Javascript相关问答推荐

我无法在NightWatch.js测试中获取完整的Chrome浏览器控制台日志(log)

模块与独立组件

如何将连续的十六进制字符串拆分为以空间分隔的十六进制块,每个十六进制块包含32个二元组?

传递一个大对象以在Express布局中呈现

Angular中计算信号和getter的区别

嵌套异步JavaScript(微任务和macrotask队列)

阿波罗返回的数据错误,但在网络判断器中是正确的

使用ThreeJ渲染的形状具有抖动/模糊的边缘

WhatsApp Cloud API上载问题:由于MIME类型不正确而导致接收&Quot;INVALID_REQUEST";错误

如何将未排序的元素追加到数组的末尾?

如何使用JS创建一个明暗功能按钮?

为什么延迟在我的laravel项目中不起作用?

如何修复使用axios运行TSC index.ts时出现的错误?

与在编剧中具有动态价值的定位器交互

ReferenceError:无法在初始化之前访问setData

为什么当雪碧的S在另一个函数中时,Phaser不能加载它?

JavaScript:多个图像错误处理程序

$GTE的mongoose 问题

当达到高度限制时,如何裁剪图像?使用html和css

调试jQuery代码以获取所有行的总和(票证类型)