Проблема с использованием команды if / then с «checkbox.checked === true», чтобы скрыть / показать элемент, когда задействован другой флажок

1

TL; DR: Как установить флажок, который отображает определенный элемент div, если все переключатели пустые, но если у вас выбрана определенная кнопка переключателя, он будет отображать другой элемент div, когда вы его отметите. У меня не работает код, и я не знаю почему.

Извините, это будет очень длинный и сложный вопрос. У меня есть флажок, который показывает или скрывает класс элементов div ("c") в зависимости от того, установлен флажок или нет, который работал нормально. У меня также есть две радиокнопки, расположенные в другом месте на странице, которые, при выборе (при условии, что "c" также выбрано), отображают разные элементы div, расположенные внутри одного из элементов "c" - позвольте вызывать эти внутренние div " один "и" два ". Те, которые работали хорошо, а также.

По умолчанию, когда флажок установлен, отображается "один", даже если ни один переключатель не был выбран. Если кто-то установит флажок, а затем переключатель "два", "один" исчезнет, а "два" займет его место. Моя трудность заключается в следующем: если кто-то проверяет "c" (отображая, таким образом, "один"), затем выбирает переключатель, чтобы отобразить "два" вместо "один", снимает флажок с "c" и затем проверяет его снова, я хочу " два ", чтобы появиться вместо" одного ". Другими словами, я хочу по-прежнему отображать "один" по умолчанию, когда отмечен "с", но я также хочу сделать так, чтобы, если переключатель "два" уже был выбран и флажок снят, установите флажок покажет "два" вместо "один".

Для флажка у меня просто есть функция onclick, которая скрывает или показывает "c" (через display: none/display: block) каждый раз, когда флажок нажимается. Две переключатели работают одинаково (за исключением того, что флажок должен быть установлен для того, чтобы "w" или "d" действительно отображались, поскольку они скрыты, если "c" скрыто).

Прямо сейчас, функция onclick, которая скрывает/показывает "c", говорит, что если выбрана радиокнопка для "two", то должна появиться "two"; если нет, то должен появиться "один". (Это то, как я заставляю "один" отображать по умолчанию, не заставляя его появляться при каждом нажатии флажка, поскольку ни одна из переключателей не выбирается при загрузке страницы.) По какой-то причине он не работает, и я не понимаю, почему,

Кроме того, не уверен, имеет ли это значение, но переключатели находятся в одном из элементов "с" и появляются только при нажатии флажка. Во всяком случае, вот соответствующие части моего кода:

HTML:

<input type="checkbox" onclick="showdiv()"> Checkbox to show all divs in the class 'data'

<div class="data" style="display:none;">
<input type="radio" id="radio1" name="a" onclick="one()"> Radio button to show first div
<input type="radio" id="radio2" name="a" onclick="two()"> Radio button to show second div
</div>

<div class="data" style="display:none;">
<div id="one" style="display:none;">first div</div>
<div id="two" style="display:none;">second div</div>
</div>

Javascript:

<script type="text/javascript">

var data = document.getElementsByClassName("data");
var one = document.getElementById("one");
var two = document.getElementById("two");

function one() {
    one.style.display = "block";
    two.style.display = "none";
}

function two() {
    two.style.display = "block";
    one.style.display = "none";
}

function showdiv() {
    for(var i = 0; i < data.length; i++) {
        data[i].style.display === "none" ?
        data[i].style.display = "block" :
        data[i].style.display = "none";}
    var checktwo = document.getElementById("radio2");
    if (checktwo.checked === true) {
        (two.style.display = "block") &&
        (one.style.display = "none");}
    else {
        (one.style.display = "block") &&
        (two.style.display = "none");}
}

</script>

Вот что происходит: я устанавливаю флажок для отображения "c", и "one" отображается по умолчанию (как и должно быть, поскольку функция showdiv() говорит, что нужно показывать "one", только если переключатель "два" не установлен) на данный момент выбрано). Я выбираю переключатель, чтобы отобразить "два" вместо "один", и это прекрасно работает. Но затем, когда я снимаю флажок и снова устанавливаю флажок для отображения "с", появляется "один", когда он должен показывать "два".

Надеюсь, это простое исправление - я в основном выучил Javascript только для того, чтобы сделать то, над чем я работаю, и все еще разбираюсь в базовых вещах, так что, возможно, я просто упустил что-то простое. Я был бы вечно благодарен любому, кто может помочь мне с этим.

  • 4
    Я думаю, что вы должны выразить проблему в гораздо меньших словах, чем это, иначе никто не будет читать все это, и они просто перейдут к другому вопросу.
  • 1
    (one.style.display = "block") && (two.style.display = "none"); Что это ?? Если showDiv не работает, я понял, попытайтесь заставить вас, если еще как, если (....) {two.style.display = "block"; one.style.display = "none"} ....
Показать ещё 1 комментарий
Теги:

1 ответ

0
Лучший ответ

Вы создаете слишком много функций, чтобы просто переключать вложенные div на один уровень. Кроме того, вы должны избегать использования встроенных on* handlers (onclick, oninput и т.д.) И заменять их event listeners следующим образом:

Все, что вам нужно, это две функции:

  • одна функция, скажем, showdiv() для переключения основного div при нажатии на первый вход и,
  • другая функция, скажем, showInnerDiv() для переключения #one и #two.

Проверьте и запустите фрагмент кода ниже для практического примера выше:

var input = document.querySelector('input'); // retrieve first input
var innerBtns = document.querySelectorAll('input[type^="radio"]'); // retrieve the radio buttons

function showdiv() {
  var data = document.querySelectorAll(".data"); // retrieve both .data divs
  data.forEach(x => { //use forEach to toggle the display of each .data div
    x.style.display = (x.style.display === "none") ? "block" : "none";
  });

  document.getElementById("one").style.display = "block";
  document.getElementById("two").style.display = "none";
}

function showInnerDiv() {
  var one = document.getElementById("one");
  var two = document.getElementById("two");
  var checktwo = document.getElementById("radio2");
  if (checktwo.checked === true) {
    two.style.display = "block";
    one.style.display = "none";
  }
  else {
    one.style.display = "block";
    two.style.display = "none";
  }
}

input.addEventListener("click", showdiv);
innerBtns.forEach(btn => { //use forEach to add a click listener to each radio button
  btn.addEventListener("click", showInnerDiv);
})
#one {background-color:red; padding: 10px;margin-top: 10px;}
#two {background-color:yellow; padding: 10px;margin-top: 10px;}
<input type="checkbox"> Checkbox to show all divs in the class 'data'

<div class="data" style="display:none;">
<input type="radio" id="radio1" name="a"> Radio button - first div
<input type="radio" id="radio2" name="a"> Radio button - second div
</div>

<div class="data" style="display:none;">
<div id="one" style="display:none;">first div</div>
<div id="two" style="display:none;">second div</div>
</div>
  • 0
    Спасибо за ваш ответ. Это будет прекрасно работать, за исключением того, что я хочу, чтобы «один» отображался по умолчанию, когда флажок установлен впервые. Кроме того, я не могу сделать универсальный querySelector ('input') или querySelector ('input [type = "radio"]'), потому что у меня есть тонна других флажков и переключателей на той же странице, которые должны делать другие вещи когда выбран. Важно ли делать здесь querySelector / какие-либо проблемы с получением их по идентификатору? Еще один вопрос. В вашей функции showdiv () заменяют ли querySelectorAll () и .forEach () исходный цикл for, который у меня был?
  • 0
    Вы можете использовать идентификатор также вместо querySelector или querySelectorAll yes.I только предположил , что выше полный код. В любом случае, позвольте мне изменить ответ так , что one будет отображаться по умолчанию. Оставайтесь на линии.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню