Question

当我点击任何字母按钮时，我试图按照字母字符更改图像。

HTML

 function hideImage() {
   var button = document.getElementsByClassName("btn-group");
   document.getElementsByClassName('image-group').onclick = function() {
       if (button.style.display == "none") {
         button.style.display = "block";
       } else {
         button.style.display = "none";
       }

的JavaScript

<template>
  <span>
    {{ manufacturer | htmlDecode }}
  </span>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters({
      attributes: 'extraCart/attributeListByCode'
    }),
    manufacturer () {
      let manufacturer = this.product.manufacturer
      if (this.attributes.manufacturer) {
        let option = this.attributes.manufacturer.options.find(av => {
          return av.value === manufacturer
        })
        if (option) {
          return option.label
        }
      }
    }
  },
  props: {
    product: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped rel="stylesheet/stylus" lang="stylus">

</style>

我收到错误＆＃34;显示＆＃34;属性不能设置为undefined。

Answer 1

getElementsByClassName() gathers all elements with a given className，称为HTMLCollection or NodeList。为了引用 NodeList / HTMLCollection 中的每个项目，我们必须使用for循环遍历每个项目，或者将NodeList转换为数组，然后使用数组方法。

以下Demo使用;

执行后者（数组方法）

Array.from()将每个NodeList转换为数组
forEach() 数组方法，用于遍历数组并在每个button.btn上为每个事件处理程序/ button.btn分配一个onclick事件处理程序根据数组的当前索引位置对应img.img。
每张图片的实际展示/隐藏行为均由 classList.toggle('off')

演示

在演示中评论的详细信息

＆＃13;

/* Collect all .btn classes into a NodeList and comvert it into 
|| an array
*/
var btnGroup = Array.from(document.getElementsByClassName("btn"));

/* Collect all .img classes into a NodeList and convert it into 
|| an array
*/
var imgGroup = Array.from(document.getElementsByClassName('img'));

/* Iterate (loop) thru the imgGroup array with forEach() array
|| method.
*/// In each loop get a .btn from the btnGroup array's index 
//// position that corresponds with the current index of the loop.
//// Register an onclick event handler that toggles the .off class
//// to a .img of the imgGroup array positioned at current loop 
//// index.


imgGroup.forEach(function(img, idx) {

  btnGroup[idx].onclick = function() {

    img.classList.toggle('off');
  }

});

＆＃13;

.off {
  display: none;
}

＆＃13;

<div id="btn-group">
  <input type="button" value="A" class="btn" />
  <input type="button" value="B" class="btn" />
  <input type="button" value="C" class="btn" />
  <input type="button" value="D" class="btn" />
  <input type="button" value="E" class="btn" />
</div>

<div id="img-group">
  <img src="https://www.luckyclovertrading.com/images/LBL14CG_A_a.jpg" class="img" width='100'>

  <img src="https://etc.usf.edu/presentations/extras/letters/theme_alphabets/26/12/B-400.png" class="img" width='100'>

  <img src="https://etc.usf.edu/presentations/extras/letters/fridge_magnets/orange/13/C-400.png" class="img" width='100'>

  <img src="https://etc.usf.edu/presentations/extras/letters/varsity_letters/37/16/D-400.png" class="img" width='100'>

  <img src="https://images-na.ssl-images-amazon.com/images/I/31ETtJ6FG6L.jpg" class="img" width='100'>
</div>

＆＃13;

Answer 2

我假设你有一个按钮和图像列表，唯一的区别是字母。在这种情况下，你可以做这样的事情。

let btns = document.getElementsByClassName('btn-action')
for(let i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    hideImage(btns[i].value);
  })
}

function hideImage(letter){
  let id = "image-" + letter;
  let img = document.getElementById(id)
  if(img.style.display === "none") {
    img.style.display = "block";
  }
  else {
    img.style.display = "none";
  }
}

<div id="btn">
  <input type="button" value="A" class="btn-group btn-action"/>
 </div>

 <div id="images">
    <img src="Letter-A.png" id="image-A" class="image-group">
 </div>

请避免使用内联HTML事件属性

如何通过单击HTML按钮隐藏和显示图像

2 个答案:

演示