jquery - 使用 jQuery 在单击关闭按钮时隐藏用户的弹出窗口

Question

我需要帮助以在两种情况下关闭用户的弹出窗口:

我。单击其同级 div 中的相应“closebtn”时。 二.当另一个用户的 div 被点击时，它会关闭前一个用户的弹出窗口，并打开它自己用户的弹出窗口。

我在这里更新了 JSFiddle ( https://jsfiddle.net/Sunny1719/ufo938L5/) 上的元素!

if(hideStatus === false){
            $('.close-btn').click(function(){
                $(this).parents(user).siblings().hide();
                $(this).hide();
                hideStatus = true;
            });
        } 

        if(hideStatus === true) {
            $(user).click(function(){
                $(this).addClass('active');
                $(this).siblings().show();
                $(this).children(closeBtn).show();
            });
        }   

谢谢， 晴天

Answer 1

试试下面的代码。我并不是说这是最好的方法，但它会按照您的要求进行。

$(document).ready(function(){
    $.getJSON("https://api.randomuser.me/?results=5", function(data){

        var heading = $("header").append("<h1>Contact List</h1>").css({"text-align":"center", "color":"gray", "text-shadow":"1px 1px lightgray"});

        var sortlabel = $("<label class='sort-label'>sort</label>").appendTo(heading).addClass("sort-label");
        var unsort = $("<a href='#' class='unsort'>&#8597;</a>").appendTo(sortlabel);
        var sortasc = $("<a href='#' class='sortasc'>&uarr;</a>").appendTo(sortlabel);
        var sortdesc = $("<a href='#' class='sortdesc'>&darr;</a>").appendTo(sortlabel);

        var dataLength = data.results.length;   

        var wrapper = $("<div class='wrapper'></div>").appendTo("main");
        //css({"column-count": "3", "column-fill":"balance"}); 


        for(var i=0; i<dataLength; i++)
        {
            /*User data/div container */
            var modalId = "mod-"+i;
            user = $("<div class='user-container' data-mod-id='"+modalId+"'/>").appendTo(wrapper);          
            img = $("<img class='user-img' src='" + data.results[i].picture.thumbnail + "'/>").appendTo(user);
            userName = $("<span />").appendTo(user).addClass('user-name');
            lastName = $("<strong>" + data.results[i].name.last + ", " + "</strong>").appendTo(userName).addClass('user-lastname'); 
            firstName = $("<strong>" + data.results[i].name.first + "</strong>").appendTo(userName).addClass('user-firstname'); 




            /*User Modal or Pop-up starts here*/            

            userModal = $("<div id='"+modalId+"' class='user-modal' />").appendTo(wrapper).addClass('user-modal');
      closeBtn = $("<a href='#' class='close-btn'>&times;</a>").appendTo(userModal);
            modalImg = $("<img class='modal-img' src='" + data.results[i].picture.large + "'/>").appendTo(userModal).addClass('modal-img');
            userBadge = $("<div class='user-badge' />").appendTo(userModal);
            badgeName = $("<p class='badge-name'>username</p><p class='badge-name-value'>" + data.results[i].login.username + "</p>").appendTo(userBadge); 
            modalName = $("<div/>").appendTo(userModal).addClass('modal-name');
            modalLastName = $("<strong>" + data.results[i].name.last + ", " + "</strong>").appendTo(modalName).addClass('modal-lastname'); 
            modalFirstName = $("<strong>" + data.results[i].name.first + "</strong>").appendTo(modalName).addClass('modal-firstname'); 
            modalInfo = $("<div />").appendTo(userModal).addClass('modal-info');
            email = $("<label class='model-label'><em>email</em></label>&nbsp;&nbsp;<span class='user-info'> " + data.results[i].email + "</span><br />").appendTo(modalInfo);
            phone = $("<label class='model-label'><em>phone</em></label>&nbsp;&nbsp;<span class='user-info'> " + data.results[i].phone + "</span><br />").appendTo(modalInfo); 
            street = $("<label class='model-label'><em>street</em></label>&nbsp;&nbsp;<span class='user-info'> " + data.results[i].location.street + "</span><br />").appendTo(modalInfo); 
            city = $("<label class='model-label'><em>city</em></label>&nbsp;&nbsp;<span class='user-info'> " + data.results[i].location.city + "</span><br />").appendTo(modalInfo); 
            state = $("<label class='model-label'><em>state</em></label>&nbsp;&nbsp;<span class='user-info'> " + data.results[i].location.state + "</span><br />").appendTo(modalInfo); 
            zip = $("<label class='model-label'><em>zip</em></label>&nbsp;&nbsp;<span class='user-info'> " + data.results[i].location.postcode + "</span><br />").appendTo(modalInfo); 

            /*User Modal or Pop-up ends here*/


        }

        /* Sort function
        $('.sortasc').click(function(a, b){
            var aName = a.lastName.toLowerCase();
            var bName = b.lastName.toLowerCase(); 
            return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0));
        });
        */
        $('.user-modal').hide(); //for hiding all modals on load
        $('.close-btn').click(function(){
        $(this).parent().hide();
    });
    $('.user-container').click(function(){
        $('.user-modal').hide();
        $("#"+$(this).attr("data-mod-id")).show();
    });
        /*var hideStatus = false;

        if(hideStatus === false){
            $('.close-btn').click(function(){
                $(this).parents(user).siblings().hide();
                $(this).hide();
                hideStatus = true;
            });
        } 

        if(hideStatus === true) {
            $(user).click(function(){
                $(this).addClass('active');
                $(this).siblings().show();
                $(this).children(closeBtn).show();
            });
        }   */


    });
});