jQuery 모달에 데이터 전달

Question

간단한 모달을 처음부터 사용합니다. 공상은 아직 추가되지 않았다. 하지만 배열에서 데이터를 전달해야합니다. 그리고 지금까지 clickclock을 얻은 유일한 요소는 배열의 마지막 멤버가 모든 클릭 가능한 요소에 추가 된 것입니다. 클릭시 적절한 데이터가 전달되도록하기 위해해야 ​​할 일에 대해 조언하십시오.

<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(); 

Answer 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>