Question

这是我第一次编写HTML / Javascript。我有许多按钮，按下它们会改变图像 - 一切都好。

我还希望在按下按钮后对图像中发生的事情进行描述。当按下其中一个按钮时，它还需要返回不突出显示。

我玩过if语句等，但我似乎无法让它发挥作用。

这是我到目前为止所做的：

<button class="rbutton" onclick="R1Change()" style="position:absolute; Left:47.1%; Top: 70.7%; z-index: +1"></Button>

function R1Change() { 
    var img = document.getElementById("image"); 
    img.src="S1.png"; 
    return false; 
}

任何提示？

Answer 1

这是vanilla JavaScript中的一个简单示例（没有jQuery或其他库）。

关键部分是更改target元素/描述的样式属性（我还添加了一些简短的注释，告诉您脚本的功能）。

description.style.backgroundColor = 'orange'

＆＃13;

var button = document.getElementById('button'); // find button
var description = document.getElementById('figcaption'); // find description
var changeDescription = function() {
  // change color for the description
  description.style.backgroundColor = 'orange';
};
button.addEventListener('click', function(event) {
  // detect click on button
  changeDescription();
});

＆＃13;

<button id="button">Clcik me please</Button>

<figure>
  <img src="http://pipsum.com/435x310.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption id="figcaption">Fig1. - Your description here.</figcaption>
</figure>

＆＃13;

或者您也可以使用classList。

description.classList.add("yourClass");

Answer 2

我要做的只是将文字说明的背景颜色更改为您想要突出显示的颜色。应该是这样的（基于代码的评论）：

<button class="rbutton" onclick= "R1Change()"Style="position:absolute; Left:47.1%; Top: 70.7%; z-index: +1"></Button>

-

function R1Change() { 
 var img = document.getElementById("image");
 var description = document.getElementById("description");
 description.style.backgroundColor = 'yellow';
 img.src="S1.png"; 
 return false; 
}

按下按钮突出显示文本部分

2 个答案: