jQueryを使用して閉じるボタンをクリックするとユーザーのポップアップが表示されない

Question

2つの条件でユーザーのポップアップを閉じるには、

でヘルプが必要です。その内部の対応する 'closebtn'がクリックされると、兄弟divがクリックされます。 ii。他のユーザーの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(); 
      }); 
     } */ 


    }); 
});