Question

我正在尝试做一些测验登陆器。而且我想将div cs从显示：无更改为显示：单击按钮时阻止。

我正在使用JS尝试，但无法。

示例：我有一个问题，每个问题有两个按钮（是和否），因此，如果单击任何按钮（是或否），则Div 2必须将其CSS从显示更改为：无更改为显示：阻止等等还有其他问题。

希望您能得到它。

这是我正在尝试发送的发帖的链接

https://us.healthshul.com/test-post/

人需要一些帮助。

Answer 1

让我们说您有此按钮和文字：

<div id="foo">hello world!</div>
<button id="switch" />Click me</button>

使用此代码更改CSS：

$('#switch').click(function() {
    $('#foo').css({
        'display': 'Block'
    });
});

这样，当您单击切换时，样式显示将从无更改为块

Answer 2

立即加载所有问题。将它们放置在同一位置，并使用position:absolute使其重叠。给他们每个问题增加1的ID值。

我编写的JavaScript设置了一个与问题编号（也是问题ID）相对应的变量。当用户单击答案时，将执行该功能。它会检索当前问题的ID，将其显示设置为无（显示下一个问题），然后在ID变量的值中添加一个。

代码如下：

var num = 1;

function display() {
  document.getElementById(num).style.display = "none";
  num += 1;
}

.button {
  padding: 10px 20px;
  border: 1px solid black;
}

.button:hover {
  cursor: pointer;
}

.question {
  width: 250px;
  height: 100px;
  background-color: gray;
  display: block;
  position: absolute;
}

<div class="question" id="4">
  <span class="text">Question4 Question4 Question4 Question4 Question4 Question4</span>
  <button class="button" onClick="display();">Answer 1</button>
  <button class="button" onClick="display();">Answer 2</button>
</div>
<div class="question" id="3">
  <span class="text">Question3 Question3 Question3 Question3 Question3 Question3</span>
  <button class="button" onClick="display();">Answer 1</button>
  <button class="button" onClick="display();">Answer 2</button>
</div>
<div class="question" id="2">
  <span class="text">Question2 Question2 Question2 Question2 Question2 Question2</span>
  <button class="button" onClick="display();">Answer 1</button>
  <button class="button" onClick="display();">Answer 2</button>
</div>
<div class="question" id="1">
  <span class="text">Question Question Question Question Question Question Question</span>
  <button class="button" onClick="display();">Answer 1</button>
  <button class="button" onClick="display();">Answer 2</button>
</div>

如何将Div Display CSS从None更改为Block on Button单击

2 个答案: