Question

我想创建一个允许我通过向函数传递参数来显示或隐藏按钮的函数。

<div class="grid">
<div id="quiz" class="centered grid__col--8">
    <h1>Awesome Quiz</h1>

    <h2 id="question" class="headline-secondary--grouped"></h2>
    <h3 id="score"></h3>

    <p id="choice0"></p>
    <button id="guess0" class="btn--default">Select Answer</button>

    <p id="choice1"></p>
    <button id="guess1" class="btn--default">Select Answer</button>

    <footer>
        <p id="progress">Question x of y</p>
    </footer>
</div>

上面我有一个id =＆＃34; guess0＆＃34;的按钮元素。我想使用javascript函数在使用if ... else语句执行某个操作后隐藏该元素。

我已经尝试了以下选项但没有成功:(我意识到最后一个可能是愚蠢的，但我想彻底了解我已经尝试过的。）

function guess0ButtonDisplay(displayStyle) {
guess0Button.style.display = '\'' + displayStyle + '\'' ;
}

function guess0ButtonDisplay(displayStyle) {
guess0Button.style.display = displayStyle;
}

function guess0ButtonDisplay(displayStyle) {
guess0Button.style.display = 'displayStyle';
}

试图调用该函数：

guess0ButtonDisplay(none);

控制台报告了一个＆＃34; Uncaught ReferenceError：none未定义＆＃34;对于所有上述函数，当我调用它们并传入参数时，没有＆＃39;。

如果我想简单地隐藏按钮＆＃34; id = guess0＆＃34;我可以成功使用以下功能：

function guess0ButtonDisplay() {
guess0Button.style.display = 'none';
}

但是，我想知道我是否可以使用一个函数在整个代码中的多个位置更改css显示属性值，而不是编写单独的函数来隐藏元素（set css：display = none;）和另一个函数显示元素（set css：display = inline;）。

Answer 1

将none作为字符串传递

ArrayList<String>

＆安培;在函数中使用像这样

for

Answer 2

在您的示例中，您必须将其命名为：

guess0ButtonDisplay('none');

带引号的

。并使用您的函数的第2版：

function guess0ButtonDisplay(displayStyle) {
  guess0Button.style.display = displayStyle;
}

那就是说，你应该真正定义一个CSS类，只需添加/删除类：

# CSS
.hidden {
  display: none;
}

// JS
function guess0ButtonDisplay(show) {
  if (show) {
    guess0Button.classList.remove('hidden');
  } else {
    guess0Button.classList.add('hidden');
  }
}

虽然代码更多，但它更清晰，因为它允许您控制CSS而不会在代码中混合使用它，并允许您重复使用块。

如何将参数传递给函数调用以更改css样式？

2 个答案: