对于我的项目,我们需要能够定制产品。我已经做了一些按钮来改变汽车的颜色(通过切换图像源)。但是我还需要在按下同一按钮时更改文本“颜色:午夜黑->蓝色”,但似乎无法正常工作。希望有人能帮忙。
function changeImage0() {
let img = document.getElementById("customColor");
img.src = "../resources/customize/rsz_black.jpg";
return false;
}
function changeImage1() {
let img = document.getElementById("customColor");
img.src = "../resources/customize/rsz_blue.jpg";
return false;
}
function changeImage2() {
let img = document.getElementById("customColor");
img.src = "../resources/customize/rsz_red.jpg";
return false;
}
function changeImage3() {
let img = document.getElementById("customColor");
img.src = "../resources/customize/rsz_white.jpg";
return false;
}
function changeImage4() {
let img = document.getElementById("customColor");
img.src = "../resources/customize/rsz-silver.jpg";
return false;
}
<main>
<h1>Personaliseer je kleur</h1>
<figure class="imageCustom">
<img alt="zwarte mercedes amg gt" id="customColor" src="../resources/customize/rsz_black.jpg" />
</figure>
<article class="TextCustom">
<p><br><b>Auto:</b> Mercedes AMG GT 4 Midnight Black
<br><b>Release:</b> Q2 2019</p>
<!-- text that needs to change when the a certain button is clicked -->
<p class="TextKleur" id="ZwartKleur"><br><b>Kleur:</b>Midnight Black</p>
</article>
<!-- we stoppen de buttons in een aside , zodat we deze gemakkelijk verticaal aan de linkerkant van het scherm
kunnen weergeven-->
<aside>
<a class=buttonKleur id="BlackGt" onclick="changeImage0();">Midnight Black</a>
<a class=buttonKleur id="BlueGt" onclick="changeImage1();">Sky blue</a>
<a class=buttonKleur id="RedGt" onclick="changeImage2();">Red</a>
<a class=buttonKleur id="WhiteGt" onclick="changeImage3();">White</a>
<a class=buttonKleur id="SilverGt" onclick="changeImage4();">Silver</a>
</aside>
答案 0 :(得分:1)
您可以将event.target
与innerText
和querySelector
结合使用,如下所示:
<a class=buttonKleur id="BlackGt" onclick="changeImage0(event);">Midnight Black</a>
function changeImage0(event) {
let img = document.getElementById("customColor");
img.src = "../resources/customize/rsz_black.jpg";
document.getElementById("ZwartKleur").querySelector("b").innerText = event.target.innerText;
return false;
}
答案 1 :(得分:0)
您的代码将重新访问并进行清理
标记
描述性内容可以分为table
或在下面的示例中分为描述列表(<dl>
)
<main>
<h1>Personaliseer je kleur</h1>
<figure class="imageCustom">
<img alt="zwarte mercedes amg gt" id="customColor" src="../resources/customize/rsz_black.jpg"/>
</figure>
<article class="TextCustom">
<dl>
<dt>Auto:</dt>
<dd>Mercedes AMG GT 4 Midnight Black</dd>
<dt>Release:</dt>
<dd>Q2 2019</dd>
<!-- text that needs to change when the a certain button is clicked -->
<dt>Kleur:</dt>
<dd id="ZwartKleur">Midnight Black</dd>
</dl>
</article>
<!-- we stoppen de buttonxs in een aside , zodat we deze gemakkelijk verticaal aan de linkerkant van het scherm
kunnen weergeven-->
<aside>
<a class=buttonKleur data-image="../resources/customize/rsz_black.jpg">Midnight Black</a>
<a class=buttonKleur data-image="../resources/customize/rsz_blue.jpg">Sky blue</a>
<a class=buttonKleur data-image="../resources/customize/rsz_red.jpg">Red</a>
<a class=buttonKleur data-image="../resources/customize/rsz_white.jpg">White</a>
<a class=buttonKleur data-image="../resources/customize/rsz-silver.jpg">Silver</a>
</aside>
</main>
您所有的函数都可以简化为一个函数,该函数可以读取单击的链接的data-image
属性和textContent
属性
JS:
<script>
let img = document.getElementById("customColor");
let color = document.getElementById("ZwartKleur");
document.querySelector('aside').addEventListener('click', function(ev) {
let tgt = ev.target;
if (tgt.matches('[data-image]')) {
/* image */
img.src = tgt.dataset.image;
/* color */
color.textContent = tgt.textContent;
ev.preventDefault();
}
});
</script>
答案 2 :(得分:0)
您只需在这里的代码中执行一个功能即可
:
function changeImage(el) {
let img = document.getElementById("customColor");
//console.log(el.getAttribute('data-alt'));
img.src = el.getAttribute('data-img');
img.alt = el.getAttribute('data-alt');
return false;
}
<main>
<h1>Personaliseer je kleur</h1>
<figure class="imageCustom">
<img alt="zwarte mercedes amg gt" id="customColor" src="../resources/customize/rsz_black.jpg" />
</figure>
<article class="TextCustom">
<p><br><b>Auto:</b> Mercedes AMG GT 4 Midnight Black
<br><b>Release:</b> Q2 2019</p>
<!-- text that needs to change when the a certain button is clicked -->
<p class="TextKleur" id="ZwartKleur"><br><b>Kleur:</b>Midnight Black</p>
</article>
<!-- we stoppen de buttons in een aside , zodat we deze gemakkelijk verticaal aan de linkerkant van het scherm
kunnen weergeven-->
<aside>
<a class=buttonKleur onclick="changeImage(this);" data-img="your image url" data-alt="Midnight Black">Midnight Black</a>
<a class=buttonKleur onclick="changeImage(this);" data-img="your image url" data-alt="Sky blue">Sky blue</a>
<a class=buttonKleur onclick="changeImage(this);" data-img="your image url" data-alt="Red">Red</a>
<a class=buttonKleur onclick="changeImage(this);" data-img="your image url" data-alt="White">White</a>
<a class=buttonKleur onclick="changeImage(this);" data-img="your image url" data-alt="Silver">Silver</a>
</aside>
谢谢