单击某个按钮时我需要更改文本

Question

对于我的项目，我们需要能够自定义产品。我已经制作了一些改变汽车颜色的按钮（通过切换图像源）。但是我也需要在按下同一个按钮时改变文字“颜色：午夜黑 - >蓝”，但我似乎无法让它工作。希望有人可以提供帮助。

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>

Answer 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;
}

Answer 2

你可以在这里只用一个函数来完成这里的代码：

    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>

谢谢

Answer 3

您的代码有点重新访问和清理

标记

描述性内容可以分组为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>