javascript - 将数据传递给 jQuery 模式

Question

使用从头开始构建的简单模式。还没有添加什么花哨的东西。但我需要传递数组中的数据，到目前为止我唯一得到的 onclick 是添加到所有可单击元素的数组的最后一个成员。请建议如何确保点击时传递适当的数据。

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