У меня возникают проблемы с сокрытием моих div, созданных с помощью манипуляций с DOM - PullRequest
Новая
       26

У меня возникают проблемы с сокрытием моих div, созданных с помощью манипуляций с DOM

0 голосов
/ 16 мая 2019

Пока я могу переключать контент только на первом div, созданном с помощью jquery, но остальные не отвечают на событие click.Я пытаюсь создать событие при наведении / щелчке, чтобы переключить скрытый элемент div, содержащий описание и заголовок, но я не уверен, что он должен что-то делать с соседом или ребенком? 

var projects = [
    {
      link: "https://jpimentel45.github.io/Giftastic/",
      img: "assets/images/giftstic.png",
      text: "   Giftastic",
      description: "Blah Blah Blah"
    },
    {
      link: "https://jpimentel45.github.io/TrainSchedule/train",
      img: "assets/images/train.png",
      text: "Train Schedule",
      description: "Blah Blah Blah"
    },
    {
      link: "https://jpimentel45.github.io/TriviaGame/",
      img: "assets/images/trivia.png",
      text: "Trivia Game",
      description: "Blah Blah Blah"
    },
    {
      link: "https://jpimentel45.github.io/Psychic_Game/",
      img: "assets/images/psychic.png",
      text: "Psychic Game",
      description: "Blah Blah Blah"
    }
  ];
  var port = '<div class="wrapper">';
  $("#portfolio").html(port);
  function createProject() {
    $(".wrapper").empty();
    //create array to hold start <option> tags
    var newProjects = [];
    for (var i = 0; i < projects.length; i++) {
      var projectDiv = $("<div id='show'>");
      var newOption = $("<a>");
      var img = $("<img src='' id='portImg'>");
      img.attr("src", projects[i].img);
      var text = $('<p id="txt">');
      text.text(projects[i].text);
      var desc = $("<p id = 'description'>");
      desc.text(projects[i].description);
      newOption.attr("href", projects[i].link); // add [i] here to index element

      //on media query for l phone remove .hide for div#hide and set to show
      var hideDiv = $("<div id='hide'>");    
      projectDiv.append(img);
      newOption.append(text);
      newOption.append(desc);
      hideDiv.append(newOption);     
      projectDiv.append(img);     
      projectDiv.append(hideDiv);
      newProjects.push(projectDiv); // add new option to the array
    }

    $(".wrapper").html(newProjects); // once loop is complete, add the array of elements to the DOM
  }
  createProject();
  //only toggles first pctures hide div not on others
  for (i = 0; i < projects.length; i++) {
    console.log(projects[i]);
    $("#show").click(function() {
      $("#hide[i]").toggle();
    });
  }

Я пытаюсьотобразить изображение моего проекта, и когда я наведусь на компьютер или щелкните событие для телефона, отобразится скрытый элемент div, содержащий текст и описание.Пока что для события click работает только первый div

1 Ответ

0 голосов
/ 17 мая 2019

Благодаря Адитье Тхакуру я смог решить мою проблему. Решение моей проблемы состоит в том, чтобы изменить элементы div с id на классы таким образом, чтобы они нацеливались на все элементы div, созданные в моем портфолио, и переключали скрытый контейнер, содержащий описание

...