blocks|key|19170|text|我假设您有一个按钮和图像列表，其中唯一的区别是字母表字母。在这种情况下，您可以这样做。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|19171|​|19172|let+btns+=+document.getElementsByClassName('btn-action')
for(let+i+=+0;+i+<+btns.length;+i%2B%2B)+{
++btns[i].addEventListener("click",+function()+{
++++hideImage(btns[i].value);
++})
}

function+hideImage(letter){
++let+id+=+"image-"+%2B+letter;
++let+img+=+document.getElementById(id)
++if(img.style.display+===+"none")+{
++++img.style.display+=+"block";
++}
++else+{
++++img.style.display+=+"none";
++}
}|code-block|syntax|javascript|19173|<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>|19174|19175|请避免使用内联HTML事件属性|19176|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>I assume you have a list of buttons and images where the only difference is the alphabet letter. In that case, you can do something like this.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let btns = document.getElementsByClassName('btn-action')
for(let i = 0; i &lt; 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";
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="btn"&gt;
  &lt;input type="button" value="A" class="btn-group btn-action"/&gt;
 &lt;/div&gt;

 &lt;div id="images"&gt;
    &lt;img src="Letter-A.png" id="image-A" class="image-group"&gt;
 &lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Please avoid using inline HTML event attributes</p>


blocks|key|19211|text|称为+or+的getElementsByClassName()+gathers+。为了引用NodeList/HTMLCollection中的每一项，我们必须使用for循环遍历每一项，或者将NodeList转换为数组，然后对其使用数组方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|19212|下面的Demo使用的是后者(一个数组方法)；|19213|将每个NodeList转换为数组的|19214|unordered-list-item|19215|19216|19217|数组方法循环访问数组并在每个button.btn上分配一个onclick事件处理程序根据数组的当前索引位置将每个事件处理程序/button.btn关联到相应的img.img。|19218|19219|提供了|19220|每个图像的实际显示/隐藏行为|19221|19222|演示|19223|在演示中评论的详细信息|19224|19225|​|19226|/*+Collect+all+.btn+classes+into+a+NodeList+and+comvert+it+into+
%7C%7C+an+array
*/
var+btnGroup+=+Array.from(document.getElementsByClassName("btn"));

/*+Collect+all+.img+classes+into+a+NodeList+and+convert+it+into+
%7C%7C+an+array
*/
var+imgGroup+=+Array.from(document.getElementsByClassName('img'));

/*+Iterate+(loop)+thru+the+imgGroup+array+with+forEach()+array
%7C%7C+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');
++}

});|code-block|syntax|javascript|19227|.off+{
++display:+none;
}|19228|<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>|19229|19230|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/15763707/2813224|1|https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName^0|7|O|28|3|19|N|2|4|0|7|X|1|0|0|0|0|0|0|E|A|1R|A|27|7|0|0|0|0|0|0|7|4|0|0|0|1|0|0|0|0|0|1|0^^$0|@$1|2|3|4|5|6|7|1N|8|@$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|C]|$9|1S|A|1T|B|D]]|E|@$9|1U|A|1V|1|1W]|$9|1X|A|1Y|1|1Z]]|F|$]]|$1|G|3|H|5|6|7|20|8|@]|E|@]|F|$]]|$1|I|3|J|5|6|7|21|8|@]|E|@]|F|$]]|$1|K|3|-4|5|L|7|22|8|@]|E|@]|F|$]]|$1|M|3|-4|5|6|7|23|8|@]|E|@]|F|$]]|$1|N|3|-4|5|6|7|24|8|@]|E|@]|F|$]]|$1|O|3|P|5|L|7|25|8|@$9|26|A|27|B|C]|$9|28|A|29|B|C]|$9|2A|A|2B|B|C]]|E|@]|F|$]]|$1|Q|3|-4|5|6|7|2C|8|@]|E|@]|F|$]]|$1|R|3|S|5|6|7|2D|8|@]|E|@]|F|$]]|$1|T|3|U|5|L|7|2E|8|@]|E|@]|F|$]]|$1|V|3|-4|5|6|7|2F|8|@]|E|@]|F|$]]|$1|W|3|X|5|6|7|2G|8|@]|E|@]|F|$]]|$1|Y|3|Z|5|6|7|2H|8|@$9|2I|A|2J|B|D]]|E|@]|F|$]]|$1|10|3|-4|5|6|7|2K|8|@]|E|@]|F|$]]|$1|11|3|12|5|6|7|2L|8|@$9|2M|A|2N|B|D]]|E|@]|F|$]]|$1|13|3|14|5|15|7|2O|8|@]|E|@]|F|$16|17]]|$1|18|3|19|5|15|7|2P|8|@]|E|@]|F|$16|17]]|$1|1A|3|1B|5|15|7|2Q|8|@]|E|@]|F|$16|17]]|$1|1C|3|12|5|6|7|2R|8|@$9|2S|A|2T|B|D]]|E|@]|F|$]]|$1|1D|3|-4|5|6|7|2U|8|@]|E|@]|F|$]]]|1E|$1F|$5|1G|1H|1I|F|$1J|1K]]|1L|$5|1G|1H|1I|F|$1J|1M]]]]

<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName" rel="nofollow noreferrer"><code>getElementsByClassName()</code> gathers <em><strong>all elements with a given className</strong></em></a> which is called a <a href="https://stackoverflow.com/a/15763707/2813224"><strong>HTMLCollection</strong> or <strong>NodeList</strong></a>. In order to reference each item in a <strong>NodeList/HTMLCollection</strong> we must loop thru each one using a <code>for</code> loop, or by converting the NodeList into an array and then using an array method on it.</p>
<p>The following Demo does the latter (an array method) using;</p>
<ul>
<li><p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from" rel="nofollow noreferrer"><strong><code>Array.from()</code></strong></a> to convert each NodeList into an array</p>
</li>
<li><p><strong><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach" rel="nofollow noreferrer"><code>forEach()</code></a></strong> array method to iterate through the arrays and assign an onclick event handler on each <code>button.btn</code> associate each event handler/<code>button.btn</code> to the corresponding <code>img.img</code> according to current index position of the arrays.</p>
</li>
<li><p>The actual show/hide behavior of each image is provided by <strong><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/classList" rel="nofollow noreferrer"><code>classList.toggle('off')</code></a></strong></p>
</li>
</ul>
<h2>Demo</h2>
<p><strong>Details commented in Demo</strong></p>
<hr>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/* 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');
  }

});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.off {
  display: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="btn-group"&gt;
  &lt;input type="button" value="A" class="btn" /&gt;
  &lt;input type="button" value="B" class="btn" /&gt;
  &lt;input type="button" value="C" class="btn" /&gt;
  &lt;input type="button" value="D" class="btn" /&gt;
  &lt;input type="button" value="E" class="btn" /&gt;
&lt;/div&gt;

&lt;div id="img-group"&gt;
  &lt;img src="https://www.luckyclovertrading.com/images/LBL14CG_A_a.jpg" class="img" width='100'&gt;

  &lt;img src="https://etc.usf.edu/presentations/extras/letters/theme_alphabets/26/12/B-400.png" class="img" width='100'&gt;

  &lt;img src="https://etc.usf.edu/presentations/extras/letters/fridge_magnets/orange/13/C-400.png" class="img" width='100'&gt;

  &lt;img src="https://etc.usf.edu/presentations/extras/letters/varsity_letters/37/16/D-400.png" class="img" width='100'&gt;

  &lt;img src="https://images-na.ssl-images-amazon.com/images/I/31ETtJ6FG6L.jpg" class="img" width='100'&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I'm trying to change the images as per alphabetic character when I click on any alphabetic  button.</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;div id="btn"&gt;
  &lt;input type="button" onclick="hideImage();" value="A" class="btn-group" /&gt;
&lt;/div&gt;

&lt;div id="images"&gt;
  &lt;img src="Letter-A.png" class="image-group"&gt;&lt;/img&gt;
&lt;/div&gt;
</code></pre>

<p><strong>JavaScript</strong></p>

<pre><code> 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";
       }
</code></pre>

<p>I get an error "display" property can not set as undefined.</p>


How to Hide and Show Images by clicking on HTML Button

当我点击任何字母按钮时，我会尝试按照字母字符来更改图像。HTML<div id="btn">  <input type="button" onclick="hideImage();" value="A" class="btn-group" /></div><div id="images">  <img src="Let...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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