Question

到目前为止，我只能在通过jquery创建的第一个div上切换内容，而其他人则未响应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。到目前为止，只有第一个div适用于click事件

Answer 1

多亏了Aditya Thakur，我得以解决我的问题。解决我的问题的方法是将div的ID从id更改为class，这样它就定位了我的投资组合中创建的所有div并切换了包含说明的隐藏容器

我无法隐藏通过DOM操作创建的div

1 个答案: