Как изменить CSS для отображения Div с "Нет" на блокировку при нажатии кнопки

Question

Я пытаюсь сделать посадочный модуль викторины. И я хочу изменить div cs с display: None на Display: block при нажатии кнопки.

Я пытаюсь использовать JS, но не могу.

Пример: у меня есть вопросы и две кнопки на вопрос (да и нет). Итак, если вы нажмете любую кнопку (да или нет), тогда Div 2 должен изменить свой CSS с display: none для отображения: Block and So On Для других вопросов .

Надеюсь, вы это понимаете.

Вот ссылка на пост, который я пытаюсь сделать

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

Ребят нужна помощь.

javascript css

-2

Pintu Das 22 Окт 2019 в 15:53

Возможный дубликат стиля изменения jquery элемента div при нажатии

–

MattHamer5

22 Окт 2019 в 15:54

1

Прочтите, пожалуйста, Как задать вопрос. Мы ожидаем, что вы приложите действительно разумные усилия, прежде чем придете сюда с просьбой. В этом случае вам следовало провести надлежащее исследование (все, кроме новой или уникальной темы, это), а затем показать нам, что вы пробовали (минимальный воспроизводимый пример) и объяснил, в чем именно заключается проблема. Пожалуйста, сделайте это в следующий раз, когда спросите здесь.

–

04FS

22 Окт 2019 в 15:57

Начните искать в Интернете, как выбирать элементы в JavaScript, как изменять свойства CSS в JS и как обрабатывать события щелчка.

–

Akshit Mehra

22 Окт 2019 в 16:02

Answer 1

Допустим, у вас есть эта кнопка и текст:

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

Используйте этот код для изменения CSS:

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

Таким образом, когда вы нажимаете переключатель, стиль отображения изменится с None на Block

0

Jamal S. 22 Окт 2019 в 15:59

Answer 2

Загрузите сразу все свои вопросы. Расположите их в одном месте и используйте position:absolute, чтобы они перекрывали друг друга. Дайте им значения идентификаторов, которые увеличиваются на 1 каждый вопрос.

Написанный мной JavaScript устанавливает переменную, которая соответствует номерам вопросов (которые также являются идентификаторами вопросов). Функция выполняется, когда пользователь нажимает на ответ. Он извлекает идентификатор текущего вопроса, устанавливает для его отображения значение «Нет» (открывает следующий вопрос), а затем добавляет единицу к значению переменной идентификатора.

Вот код:

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>

0

jjsecord 22 Окт 2019 в 18:13

Как изменить CSS для отображения Div с "Нет" на блокировку при нажатии кнопки

2 ответа

Похожие вопросы

Связанные вопросы

Новые вопросы

javascript