如何在答案仍然在输入中时隐藏图像。

huangapple
go评论86阅读模式
英文:

how to stay hidden the image if the answer still on the input

问题

这是你的代码，我不会翻译它，只会返回原文：

So i have this identification, i hide my image if input value is equal to data-letter. but i got a problem where i proceed to the next input.. check my code..

was there any logic that can help me with this? I don't want to use jQuery since i'm practicing JavaScript.. TIA

Here's my code

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

document.querySelectorAll("#choicesIDFExam").forEach((input) => {
input.addEventListener("keyup", function () {
var inptValue = this.value;
document.querySelectorAll("#imglabelIDFExam").forEach((imgLabel) => {
var attribute = imgLabel.getAttribute('data-letter');
if (inptValue == attribute)
{ imgLabel.setAttribute('hidden', true) }
else
{ imgLabel.removeAttribute('hidden'); }
})
})
})

<!-- language: lang-html -->

<div class="__wrapContainerExamAR">
<div class="__imagesContainerIDFExam">
<div class="__lalagyanImage">
<label id="imglabelIDFExam" data-letter="a">
a.
<img src="https://static.thenounproject.com/png/2932881-200.png" />
</label>
<label id="imglabelIDFExam" data-letter="b">
b.
<img src="https://static.thenounproject.com/png/2932881-200.png" />
</label>
<label id="imglabelIDFExam" data-letter="c">
c.
<img src="https://static.thenounproject.com/png/2932881-200.png" />
</label>
</div>
</div>
<div class="__choicesContainerIDFExam" style="display: flex;flex-direction: column;font-size: 24px;">
<label>
<input type="text" id="choicesIDFExam" style="outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center" maxlength="1"/>
1. <span id="choicesAExamML" class="__choicesMLExam">Use for controlling input and output devices with the use of programmable memory.</span>
</label>
<label>
<input type="text" id="choicesIDFExam" style="outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center" maxlength="1"/>
2. <span id="choicesAExamML" class="__choicesMLExam">Use for joining two pieces of metal by deforming one or both of them to hold one another.</span>
</label>
<label>
<input type="text" id="choicesIDFExam" style="outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center" maxlength="1"/>
3. <span id="choicesAExamML" class="__choicesMLExam">It is usually copper or aluminum, and either solid or stranded in construction.</span>
</label>
</div>
</div>

<!-- end snippet -->

英文:

So i have this identification, i hide my image if input value is equal to data-letter. but i got a problem where i proceed to the next input.. check my code..

was there any logic that can help me with this? I don't want to use jQuery since i'm practicing JavaScript.. TIA

Here's my code

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. document.querySelectorAll(&quot;#choicesIDFExam&quot;).forEach((input) =&gt; {
  2.     input.addEventListener(&quot;keyup&quot;, function () {
  3.         var inptValue = this.value;
  4.         document.querySelectorAll(&quot;#imglabelIDFExam&quot;).forEach((imgLabel) =&gt; {
  5.             var attribute = imgLabel.getAttribute(&#39;data-letter&#39;);
  6.             if (inptValue == attribute)
  7.              { imgLabel.setAttribute(&#39;hidden&#39;, true) }
  8.              else
  9.              { imgLabel.removeAttribute(&#39;hidden&#39;); }
  10.         })
  11.     })
  12. })

<!-- language: lang-html -->

  1. &lt;div class=&quot;__wrapContainerExamAR&quot;&gt;
  2.   &lt;div class=&quot;__imagesContainerIDFExam&quot;&gt;
  3.     &lt;div class=&quot;__lalagyanImage&quot;&gt;
  4.       &lt;label id=&quot;imglabelIDFExam&quot; data-letter=&quot;a&quot;&gt;
  5.         a.
  6.         &lt;img src=&quot;https://static.thenounproject.com/png/2932881-200.png&quot; /&gt;
  7.       &lt;/label&gt;
  8.       &lt;label id=&quot;imglabelIDFExam&quot; data-letter=&quot;b&quot;&gt;
  9.         b.
  10.         &lt;img src=&quot;https://static.thenounproject.com/png/2932881-200.png&quot; /&gt;
  11.       &lt;/label&gt;
  12.       &lt;label id=&quot;imglabelIDFExam&quot; data-letter=&quot;c&quot;&gt;
  13.         c.
  14.         &lt;img src=&quot;https://static.thenounproject.com/png/2932881-200.png&quot; /&gt;
  15.       &lt;/label&gt;
  16.     &lt;/div&gt;
  17.   &lt;/div&gt;
  18.   &lt;div class=&quot;__choicesContainerIDFExam&quot; style=&quot;display: flex;flex-direction: column;font-size: 24px;&quot;&gt;
  19.     &lt;label&gt;
  20.       &lt;input type=&quot;text&quot; id=&quot;choicesIDFExam&quot; style=&quot;outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center&quot; maxlength=&quot;1&quot;/&gt;
  21.       1. &lt;span id=&quot;choicesAExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Use for controlling input and output devices with the use of programmable memory.&lt;/span&gt;
  22.     &lt;/label&gt;
  23.     &lt;label&gt;
  24.       &lt;input type=&quot;text&quot; id=&quot;choicesIDFExam&quot; style=&quot;outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center&quot; maxlength=&quot;1&quot;/&gt;
  25.       2. &lt;span id=&quot;choicesAExamML&quot; class=&quot;__choicesMLExam&quot;&gt;Use for joining two pieces of metal by deforming one or both of them to hold one another.&lt;/span&gt;
  26.     &lt;/label&gt;
  27.     &lt;label&gt;
  28.       &lt;input type=&quot;text&quot; id=&quot;choicesIDFExam&quot; style=&quot;outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center&quot; maxlength=&quot;1&quot;/&gt;
  29.       3. &lt;span id=&quot;choicesAExamML&quot; class=&quot;__choicesMLExam&quot;&gt;It is usually copper or aluminum, and either solid or stranded in construction.&lt;/span&gt;
  30.     &lt;/label&gt;
  31.   &lt;/div&gt;
  32. &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

元素ID应该是唯一的，所以你应该使用类名来选择元素。您可以循环遍历元素以检查它们在输入事件中的值。

  1. function getInputValues() {
  2.   const inputValues = [];
  3.   document.querySelectorAll('.choicesIDFExam').forEach(input => {
  4.     inputValues.push(input.value);
  5.   });
  6.   return inputValues;
  7. }
  9. document.querySelectorAll('.choicesIDFExam').forEach(input => {
  10.   input.addEventListener("input", () => {
  11.     document.querySelectorAll('.imglabelIDFExam').forEach(imgLabel => {
  12.       const attribute = imgLabel.getAttribute('data-letter');
  13.       if (getInputValues().includes(attribute)) {
  14.         imgLabel.setAttribute('hidden', true);
  15.       } else {
  16.         imgLabel.removeAttribute('hidden');
  17.       }
  18.     });
  19.   });
  20. });
  1. <div class="__wrapContainerExamAR">
  2.   <div class="__imagesContainerIDFExam">
  3.     <div class="__lalagyanImage">
  4.       <label class="imglabelIDFExam" data-letter="a">
  5.         a.
  6.         <img src="https://static.thenounproject.com/png/2932881-200.png" />
  7.       </label>
  8.       <label class="imglabelIDFExam" data-letter="b">
  9.         b.
  10.         <img src="https://static.thenounproject.com/png/2932881-200.png" />
  11.       </label>
  12.       <label class="imglabelIDFExam" data-letter="c">
  13.         c.
  14.         <img src="https://static.thenounproject.com/png/2932881-200.png" />
  15.       </label>
  16.     </div>
  17.   </div>
  18.   <div class="__choicesContainerIDFExam" style="display: flex;flex-direction: column;font-size: 24px;">
  19.     <label>
  20.       <input type="text" class="choicesIDFExam" style="outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center" maxlength="1">
  21.       1. <span class="__choicesMLExam">用于通过可编程存储器控制输入和输出设备。</span>
  22.     </label>
  23.     <label>
  24.       <input type="text" class="choicesIDFExam" style="outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center" maxlength="1">
  25.       2. <span class="__choicesMLExam">用于通过变形金属的一方或双方来连接两块金属。</span>
  26.     </label>
  27.     <label>
  28.       <input type="text" class="choicesIDFExam" style="outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center" maxlength="1">
  29.       3. <span class="__choicesMLExam">通常是铜或铝，构造可以是实心或多股绞线。</span>
  30.     </label>
  31.   </div>
  32. </div>
英文:

Element IDs should be unique, so you should use class names to select the elements instead. You can loop through the elements to check their values within the input event.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. function getInputValues() {
  2.   const inputValues = [];
  3.   document.querySelectorAll(&#39;.choicesIDFExam&#39;).forEach(input =&gt; {
  4.     inputValues.push(input.value);
  5.   });
  6.   return inputValues;
  7. }
  9. document.querySelectorAll(&#39;.choicesIDFExam&#39;).forEach(input =&gt; {
  10.   input.addEventListener(&quot;input&quot;, () =&gt; {
  11.     document.querySelectorAll(&#39;.imglabelIDFExam&#39;).forEach(imgLabel =&gt; {
  12.       const attribute = imgLabel.getAttribute(&#39;data-letter&#39;);
  13.       if (getInputValues().includes(attribute)) {
  14.         imgLabel.setAttribute(&#39;hidden&#39;, true);
  15.       } else {
  16.         imgLabel.removeAttribute(&#39;hidden&#39;);
  17.       }
  18.     });
  19.   });
  20. });

<!-- language: lang-html -->

  1. &lt;div class=&quot;__wrapContainerExamAR&quot;&gt;
  2.   &lt;div class=&quot;__imagesContainerIDFExam&quot;&gt;
  3.     &lt;div class=&quot;__lalagyanImage&quot;&gt;
  4.       &lt;label class=&quot;imglabelIDFExam&quot; data-letter=&quot;a&quot;&gt;
  5.         a.
  6.         &lt;img src=&quot;https://static.thenounproject.com/png/2932881-200.png&quot; /&gt;
  7.       &lt;/label&gt;
  8.       &lt;label class=&quot;imglabelIDFExam&quot; data-letter=&quot;b&quot;&gt;
  9.         b.
  10.         &lt;img src=&quot;https://static.thenounproject.com/png/2932881-200.png&quot; /&gt;
  11.       &lt;/label&gt;
  12.       &lt;label class=&quot;imglabelIDFExam&quot; data-letter=&quot;c&quot;&gt;
  13.         c.
  14.         &lt;img src=&quot;https://static.thenounproject.com/png/2932881-200.png&quot; /&gt;
  15.       &lt;/label&gt;
  16.     &lt;/div&gt;
  17.   &lt;/div&gt;
  18.   &lt;div class=&quot;__choicesContainerIDFExam&quot; style=&quot;display: flex;flex-direction: column;font-size: 24px;&quot;&gt;
  19.     &lt;label&gt;
  20.       &lt;input type=&quot;text&quot; class=&quot;choicesIDFExam&quot; style=&quot;outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center&quot; maxlength=&quot;1&quot;/&gt;
  21.       1. &lt;span class=&quot;__choicesMLExam&quot;&gt;Use for controlling input and output devices with the use of programmable memory.&lt;/span&gt;
  22.     &lt;/label&gt;
  23.     &lt;label&gt;
  24.       &lt;input type=&quot;text&quot; class=&quot;choicesIDFExam&quot; style=&quot;outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center&quot; maxlength=&quot;1&quot;/&gt;
  25.       2. &lt;span class=&quot;__choicesMLExam&quot;&gt;Use for joining two pieces of metal by deforming one or both of them to hold one another.&lt;/span&gt;
  26.     &lt;/label&gt;
  27.     &lt;label&gt;
  28.       &lt;input type=&quot;text&quot; class=&quot;choicesIDFExam&quot; style=&quot;outline:none;border: none;border-bottom: 1px solid;width: 70px;text-align:center&quot; maxlength=&quot;1&quot;/&gt;
  29.       3. &lt;span class=&quot;__choicesMLExam&quot;&gt;It is usually copper or aluminum, and either solid or stranded in construction.&lt;/span&gt;
  30.     &lt;/label&gt;
  31.   &lt;/div&gt;
  32. &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月8日 09:07:35
  • 转载请务必保留本文链接：https://go.coder-hub.com/75380477.html
  • html
  • javascript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定