如何在单击其指定按钮时编写获取不同背景图像和文本的函数?

Question

我知道脚本根据其按钮调用文本，但我不知道如何在该文本上放置背景图像。我的计划是，背景图像也可以根据被点击的按钮改变。以下是我到目前为止所做的…

这实际上是一个学校项目，我希望它是面向行动的，或者在某种程度上与函数和方法互动。我还想添加另一个单元格表，并在那里放置一个图像和一些文本，就像一个游戏头像配置文件。

function myFunction(elem) {
var x = document.getElementById("js-description");
var description = elem.getAttribute('data-description');
x.innerHTML = description;
var button = document.getElementsByClassName('js-button');
for (var i = 0; i < button.length; i++) {
button[i].classList.remove('active-buton');
}
elem.classList.add('active-button');
}

body,
html {
height: 100%;
background-color: #190a48;
margin: 0;
}
.btn-group button {
font-family: SF;
letter-spacing: 5px;
background-color: transparent;
/* Green background */
border: 1px solid #504c7c;
/* Green border */
color: white;
/* White text */
padding: 2.5% 1%;
/* Some padding */
cursor: pointer;
/* Pointer/hand icon */
width: 15vw;
height: 6vw;
/* Set a width if needed */
display: block;
/* Make the buttons appear below each other */
margin-left: 20%;
border-radius: 4%;
-webkit-box-shadow: inset 1px 6px 12px #544e88, inset -1px -10px 5px #2e2d3a, 1px 2px 1px #2e2d3a;
-moz-box-shadow: inset 1px 6px 12px #544e88, inset -1px -10px 5px #2e2d3a, 1px 2px 1px #2e2d3a;
box-shadow: inset 1px 6px 12px #544e88, inset -1px -10px 5px #2e2d3a, 1px 2px 1px #2e2d3a;
font-size: 1vw;
}
.btn-group button:not(:last-child) {
border-bottom: none;
/* Prevent double borders */
}
.active-button:hover {
background-color: #83a1a7;
}
.description {
text-align: center;
color: white;
font-size: 50px;
font-family: St;
letter-spacing: 3px;
}

<table>
<tr>
<td rowspan="2" width=1000px; style="border: 7px solid #040434;">
<div id="js-description" class="description">
</div>
</td>
</tr>
<tr>
<td rowspan="4" height=450px; class="imgxbtn" style="transparent;">
<div class="js-button btn-group">
<button data-description="Vivamus, moriendum est" onclick="myFunction(this)">   HOBBY    </button>
<button data-description="Forsan et haec olim meminisse iuvabit" onclick="myFunction(this)">   MEMORY     </button>
<button data-description="Sapere aude" onclick="myFunction(this)">    
CONQUEST    </button>
<button data-description="Audentes fortuna iuvat" onclick="myFunction(this)">    AMBITION  </button>
<button data-description="Ad astra per aspera" onclick="myFunction(this)">    TARGET    </button>
</div>
</td>
</tr>
<tr>
<td rowspan="3" height=250px; style="border: 5px solid #040434; 
opacity:35%; 
background-color: #9a5eaa;">content</td>
</tr>
<tr>
</tr>
</table>

Answer 1

你就快成功了。您可以对背景图像使用与描述文本相同的方法。只需用image-url定义另一个数据属性，并设置相应的CSS属性，如下所示:

function onButtonClick() {
var descriptionElement = document.getElementById("description");

descriptionElement.innerHTML = event.target.dataset.description;
descriptionElement.style['background-image'] = event.target.dataset.backgroundImage;
}

<div id="description">Press one of the buttons below.</div>
<button
data-description="First description"
data-background-image="linear-gradient(red, orange)"
onclick="onButtonClick()">first</button>
<button
data-description="Second description"
data-background-image="linear-gradient(teal, green)"
onclick="onButtonClick()">second</button>

我在这里使用渐变，因为我手头没有图像。要使用实际的图像，您可以像data-background-image="url('path/to/your/image')"一样指定它。