Скрыть / показать карты в начальной загрузке - PullRequest
Новая
       18

Скрыть / показать карты в начальной загрузке

2 голосов
/ 04 ноября 2019

Я пытаюсь спрятать и показать несколько карт в начальной загрузке, но я не могу понять это. Все карты имеют карту класса (конечно), и я пытаюсь скрыть все эти карты при нажатии кнопки. Вот что у меня сейчас: 

function myFunction() {

  jQuery(document).ready(function($) {
    $(".card").hide();
  });

  var game = document.getElementById("game").value;
  var resolution = document.getElementById("resolution").value;
  var graphic = document.getElementById("graphic").value;

  if (game == "Black" && graphic == "high" && resolution == "1080") {
    alert("Hello " + game + "! You will now be redirected to www.w3Schools.com");
  } else if (book == "Red") {

  } else if (book == "Green") {

  } else {

  }
}

Вызов функции правильный, потому что предупреждение работает правильно.

По какой-то причине часть 

jQuery(document).ready(function($) {
        $(".card").hide();
      });

работает вне функции js (когда она не подключена к кнопке).

Не знаю, поможет ли это, но здесь также приведен фрагмент моего документа по начальной загрузке: 

<button type="submit" class="btn btn-primary" id="btn" onclick="myFunction()">Submit</button>
          </form>
        </div>
        <!-- Results -->
        <div class="card" id="p2" style="width:200px; margin:30px">
          <img class="card-img-top" src="https://image" alt="Card image" style="width:100%">
          <div class="card-body">
            <h5 class="card-title">Processor</h5>
            <p><a href="#">Newegg</a></p>
            <p><a href="#">Newegg</a></p>
            <p><a href="#">Newegg</a></p>
          </div>
        </div>
        <div class="card" id="p3" style="width:200px; margin:30px">
          <img class="card-img-top" src="https://image" alt="Card image" style="width:100%">
          <div class="card-body">
            <h5 class="card-title">Graphic card</h5>
            <p><a href="#">Newegg</a></p>
            <p><a href="#">Newegg</a></p>
            <p><a href="#">Newegg</a></p>
          </div>
        </div>

Здесьвещи, которые я уже пробовал:

Переключатель Как скрыть и показать карты начальной загрузки 4, наведя курсор мыши на меню навигации с помощью css?

Стандартный js document.getElementById (".card "). style.display =" none ";

Я посмотрел на реакцию, но не понимаю.

1 Ответ

1 голос
/ 04 ноября 2019

Я думаю, что вам нужно сделать следующее, если вы хотите сделать показ и скрыть переключение всех элементов, которые имеют класс карты в вашем DOM. 

var myFunction = function() {

 var divsToHide = document.getElementsByClassName("card"); 
if(divsToHide.length>0){
        for(var i = 0; i < divsToHide.length; i++){

      if( divsToHide[i].style.display== "none"){
    divsToHide[i].style.display = "block";
      }else{

           divsToHide[i].style.display = "none"; // depending on what you're doing
      }    
}} }

Надеюсь, это поможет вам

...