Javascript hide/show 有很多元素

Question

在我的 HTML 我有问题和解决方案。我想用不同的按钮隐藏和显示每个问题的解决方案。

这是我的问题：我正在为每个解决方案按钮编写一个新函数。例如，如果我有 100 个问题，那么我需要编写 100 个不同的 Javascript 函数。

有没有更好的方法来做到这一点。我可以为每个解决方案按钮只编写一个函数吗？

非常感谢您。

这是我的 html:

<li>Question 1. What is x?</li>
<button class="btn btn-outline-success" 
onclick="myFunction()">Solution</button>
<div id="Solution">
<div class="highlight">
<pre>
X is apple
</pre>

<li>Question 2. What is y?</li>
<button class="btn btn-outline-success" 
onclick="myFunction1()">Solution</button>
<div id="Solution1">
<div class="highlight">
<pre>
Y is orange
</pre>

这是我的 Javascript:

document.getElementById( 'Solution' ).style.display = 'none';

function myFunction() {
    var x = document.getElementById('Solution');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

document.getElementById( 'Solution1' ).style.display = 'none';

function myFunction1() {
    var x = document.getElementById('Solution1');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

注意：我看到很多关于隐藏和显示的问题，但我无法解决我的问题。如果这是一个重复的问题，请警告我，我可以删除。

Answer 1

您可以通过传递一个参数来重用单个函数，该参数标识文档中的哪个元素应该是 shown/hidden:

document.getElementById( 'Solution' ).style.display = 'none';

// The function now expects to be passed the ID of the element
function myFunction(elementID) {
    var x = document.getElementById(elementID);
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

现在，您可以重复调用该函数，每次只传递不同的元素 id：

 <li>Question 1. What is x?</li>
 <button class="btn btn-outline-success" onclick="myFunction('Solution')">Solution</button>
 <div id="Solution">
   <div class="highlight">
     <pre>X is apple</pre>
   </div>
 </div>

<li>Question 2. What is y?</li>
<button class="btn btn-outline-success" onclick="myFunction('Solution1')">Solution</button>
<div id="Solution1">
  <div class="highlight">
    <pre>Y is orange</pre>
  </div>
</div>

话虽如此，您应该尽可能避免使用内联 HTML 事件属性（onclick、onmouseover 等）。还有many reasons为什么。此外，您可以通过切换使用预先存在的 CSS class 来简化设置，而不是重复设置内联样式。此外，您的 HTML 语法无效。

这是您的代码的经过清理、有效和现代的版本。您所要做的就是复制问题的 HTML 结构，现有的 JavaScript 将立即为它工作。每个问题甚至不再需要名称（"Solution1"、"Solution2" 等）。

// Get all the buttons in a node list
var theButtons = document.querySelectorAll(".btn-outline-success");

// Turn node list into a JS Array
var buttonArray = Array.from(theButtons);

// Loop over the buttons and give each its click event handler
buttonArray.forEach(function(button){
  button.addEventListener("click", function(){ 
    // We will pass a reference to the current button to the function
    myFunction(this); 
  });
});

// The function now expects to be passed a reference to the button that was clicked
function myFunction(element) { 
  // Get a reference to div that follows the button and then search that div
  // for the first pre element inside of it:
  var answer = element.nextElementSibling.querySelector("pre");
  
  // All we need to do is toggle the visibility of that pre element
  answer.classList.toggle("hidden");
}

/* This class will simply be added or removed to show/hide elements */
/* All answers have this applied by default*/
.hidden {
  display:none;
}

li { margin-bottom:10px; }

<!--
    NOTES:
           1. The onclick has been removed (it is now handled in JavaScript) 
           2. The quesiton names ("Solution", "Solution1", etc.) are no longer needed
           3. Your HTML structure was invalid. Here is the proper way to make bulleted lists.
-->

<ul>
  <li>Question 1. What is x?
      <button class="btn btn-outline-success">Solution</button>
      <div>
        <div class="highlight">
          <pre class="hidden">X is apple</pre>
        </div>
      </div>
  </li>
    
  <li>Question 2. What is y?
      <button class="btn btn-outline-success">Solution</button>
      <div>
        <div class="highlight">
          <pre class="hidden">Y is orange</pre>
        </div>
      </div>
  </li>

  <li>Question 3. What is z?
      <button class="btn btn-outline-success">Solution</button>
      <div>
        <div class="highlight">
          <pre class="hidden">z is mango</pre>
        </div>
      </div>
  </li>
</ul>

Answer 2

如果我明白你想要什么，你可以使用参数。

HTML

<li>Question 1. What is x?</li>
<button class="btn btn-outline-success" onclick="myFunction(1)">Solution</button>
<div id="Solution"></div>
<div class="highlight"></div>
<pre>
    X is apple
</pre>

JS

function myFunction(var solNumber = 1) {
    var x = document.getElementById('Solution'+solNumber);
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

如果所有问题同时出现，您也可以使用 for 循环来显示它们。

Answer 3

你可以这样做：

用 class 'question' 将问题包含在 div 中，类似的解决方案包含在 class 'solution'.
同时定义一个单独的show函数，参数为被点击的按钮元素，在按钮的onclick中使用this作为参数传递。
该函数简单地找到 class 'solution' 的同级 div 并通过设置 display: block

function show_solution(buttonElement) {
  questionDiv = buttonElement.parentNode;
  
  if (questionDiv.querySelector('.solution').style.display == 'none') {
    questionDiv.querySelector('.solution').style.display = 'block';
  } else {
    questionDiv.querySelector('.solution').style.display = 'none';
  }
  
}

.solution {
  display: none;
}

.highlight {
  background: #FF0;
}

<div class="question">
  &bull; Question 1. What is x?
  <button class="btn btn-outline-success" onclick="show_solution(this)">Solution</button>
  <div class="solution">
    <div class="highlight">
      <pre> X is apple </pre>
    </div>
  </div>
</div>

<div class="question">
  &bull; Question 2. What is y?
  <button class="btn btn-outline-success" onclick="show_solution(this)">Solution</button>
  <div class="solution">
    <div class="highlight">
      <pre> Y is orange </pre>
    </div>
  </div>
</div>

Answer 4

好吧，如果 jquery 被允许，解决方案可能如下所示：

$('.Solution').hide()
$('button').on('click',function(){$(this).next().show()})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li>Question 1. What is x?</li>
<button class="btn btn-outline-success">Solution</button>
<div class="Solution">
<div class="highlight">
<pre>
X is apple
</pre>
</div></div>
<li>Question 2. What is y?</li>
<button class="btn btn-outline-success">Solution</button>
<div class="Solution">
<div class="highlight">
<pre>
Y is orange
</pre>
</div></div>

注意：这也会简化您的 html ...但是，当然，选择权在您！

Javascript hide/show 有很多元素

Javascript hide/show with many elements

html

javascript

show-hide