将数据传递给jQuery模式

使用从头构建的简单模式。没有添加任何花式。但我需要传递数组中的数据，到目前为止，我所获得的唯一一件事就是添加到所有可单击元素的数组的最后一个成员。请提供建议，确保通过点击传递适当的数据。将数据传递给jQuery模式

<div id="skills-mobile"> 
    <!-- popup content --> 
    <div id="myModal" class="modal"> 
     <img class="close-icon" src="img/close-icon.png" alt="cross or close the window icon"> 
     <article class="modal-content"> 

     </article> 
    </div> 
</div>

而且这是所使用的对象的阵列：

var skills = [ 
     { 
      "id":"html-5", 
      "skill":"HTML5", 
     }, 
     { 
      "id":"css-3", 
      "skill":"CSS3" 
     }, 
     { 
      "id":"jvscrpt", 
      "skill":"Javascript" 
     }, 
     { 
      "id":"inter-map", 
      "skill":"Interaction Mapping" 
     }, 
     { 
      "id":"wire", 
      "skill":"Wireframing" 
     }, 
     { 
      "id":"docum", 
      "skill":"Documentation" 
     }, 
     { 
      "id":"adobecc", 
      "skill":"Adobe CC" 
     } 
    ]

这是jQuery的。现在，当我关闭模式并再次打开它时，它也会一次又一次地输出值。所以它基本上会一遍又一遍地附加它，我需要修复它，我知道。如果可能的话，请提供指导我做错的地方。我认为结构是不正确的。

var skillSlideshow = function() { 

     for(var i = 0; i <= skills.length; i++) { 

      $('#skills-mobile').append('<img id="' + skills[i].id + '" class="skill-img" data-toggle="modal" data-id="107" src="' + skills[i].iconurl + '" />'); 

      //MODALS 
      // Get the modal 
      var modal = document.getElementById('myModal'); 

      // Get the button that opens the modal 
      var imgbtn = document.getElementById(skills[i].id); 

      // Get the <span> element that closes the modal 
      var closebtn = document.getElementsByClassName("close-icon")[0]; 

      // When the user clicks the button, open the modal 
      imgbtn.onclick = function() { 
       modal.style.display = "block"; 
      } 

      // When the user clicks on <span> (x), close the modal 
      closebtn.onclick = function() { 
       modal.style.display = "none"; 
      } 

      // When the user clicks anywhere outside of the modal, close it 
      window.onclick = function(event) { 
       if (event.target == modal) { 
        modal.style.display = "none"; 
       } 
      } 
     } 
    }; 
    skillSlideshow();

来源

2016-09-22 Varvara Jones

你需要什么数据，从数组传递？整个阵列？ –

我需要将单个对象传入模态。所以我有7个链接与该数组创建，然后当我点击1我需要它来抓住它的相应信息。 –

将点击图像的信息传递给模态，并在关闭模态时删除？ –

这应该使其工作...

var skills = [ 
 
     { 
 
      "id":"html-5", 
 
      "skill":"HTML5", 
 
     }, 
 
     { 
 
      "id":"css-3", 
 
      "skill":"CSS3" 
 
     }, 
 
     { 
 
      "id":"jvscrpt", 
 
      "skill":"Javascript" 
 
     }, 
 
     { 
 
      "id":"inter-map", 
 
      "skill":"Interaction Mapping" 
 
     }, 
 
     { 
 
      "id":"wire", 
 
      "skill":"Wireframing" 
 
     }, 
 
     { 
 
      "id":"docum", 
 
      "skill":"Documentation" 
 
     }, 
 
     { 
 
      "id":"adobecc", 
 
      "skill":"Adobe CC" 
 
     } 
 
    ] 
 
    var clearModal = function() { 
 
     $('#myModel').css('display', 'none') 
 
     $(".modal-content").empty(); 
 
    } 
 
    var skillSlideshow = function() { 
 

 
     for(var i = 0; i < skills.length; i++) { 
 
      $('#skills-mobile').append('<img id="' + skills[i].id + '" class="skill-img" data-toggle="modal" data-id="107" data-index="'+ i +'"src="' + skills[i].iconurl + '" />') 
 
     } 
 
     
 
     $('.skill-img').on('click', function(e) { 
 
      $('#myModel').css('display', 'block'); 
 
      var data = skills[parseInt(e.currentTarget.dataset.index)] 
 
      //injecting the data into the modal 
 
      const html = "<div>id:" + data.id + "</div><div>skill:" + data.skill + "</div>" 
 
      $('.modal-content').html(html) 
 
     }) 
 
     
 
     $('.close-icon').on('click', clearModal) 
 
     $('#myModal').on('click', function(e) { 
 
      //assuming you give proper styling to .modal-content and .modal 
 
      if(e.target.id === 'myModal') clearModal() 
 
     }) 
 
    }; 
 
    skillSlideshow();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="skills-mobile"> 
 
    <!-- popup content --> 
 
    <div id="myModal" class="modal"> 
 
     <img class="close-icon" src="img/close-icon.png" alt="cross or close the window icon"> 
 
     <article class="modal-content"> 
 

 
     </article> 
 
    </div> 
 
</div>

来源

2016-09-22 19:02:47

是的，这是行不通的！谢谢！ –

将数据传递给jQuery模式

回答

相关问题