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

您可以通过传递一个参数来重用单个函数，该参数标识应该显示/隐藏文档中的哪个元素：

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类，而不是重复设置内联样式，而不是更简单。此外，您的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

您可以这样做：

将问题附在div中，并将问题与问题＆＃39;类似的解决方案包含在课程＆＃39;解决方案中。
同时定义一个带有参数的show函数作为单击的按钮元素，在按钮的onclick中使用this作为参数传递。
该功能只是通过类＆＃39;解决方案＆＃39;找到兄弟div。并通过设置display: block

＆＃13;

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

＆＃13;

.solution {
  display: none;
}

.highlight {
  background: #FF0;
}

＆＃13;

<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>

＆＃13;

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隐藏/显示许多元素

4 个答案: