-1

当我按下 showAllButton 时，我从数组中加载了 8 个配置文件；4 名女性和 4 名男性。

然后，当我按下 showAllMenBtn 时，我再次加载了 4 个男性配置文件。

但是它们堆叠在已经附加的内容之上。

我怎样才能做到这一点，以便他们替换已经附加的配置文件？

我已经尝试了很多，.toogle()但.hide()没有任何成功。

提前致谢：）

$("#showAllBtn").click(function(){

    $(allProfiles).each(function(index, profile){

        let profileImg = $("<img>", {src:`${profile.imageSrc}`});            
        let newName = profileName = profile.name;
        let newAge = profileAge = profile.age;
        let newGender = profileGender = profile.gender;
        let newInterests = profileInterests = profile.description;

        $("#profileSection").append(profileImg, newName, newAge, newGender, newInterests);


    })

});

$("#showAllMenBtn").click(function(){   


    $(maleProfiles).each(function(index, profile){

        let profileImg = $("<img>", {src:`${profile.imageSrc}`});            
        let newName = profileName = profile.name;
        let newAge = profileAge = profile.age;
        let newGender = profileGender = profile.gender;
        let newInterests = profileInterests = profile.description;


        $("#profileSection").append(profileImg, newName, newAge, newGender, newInterests);
    })

});
4

2 回答 2

4

在第二次点击处理程序中使用.html()

$("#profileSection").html(profileImg, newName, newAge, newGender, newInterests);

注意：- .html()删除旧数据，然后在给定元素（选择器）中添加新数据

所以第二个代码需要是这样的： -

$("#showAllMenBtn").click(function(){   

    $(maleProfiles).each(function(index, profile){

        let profileImg = $("<img>", {src:`${profile.imageSrc}`});            
        let newName = profileName = profile.name;
        let newAge = profileAge = profile.age;
        let newGender = profileGender = profile.gender;
        let newInterests = profileInterests = profile.description;

        $("#profileSection").html(profileImg, newName, newAge, newGender, newInterests);
    })
});
于 2018-04-26T08:50:58.167 回答
1

我认为这会奏效。

$("#showAllBtn").click(function(){

    $("#profileSection").html("");
    $(allProfiles).each(function(index, profile){

        let profileImg = $("<img>", {src:`${profile.imageSrc}`});            
        let newName = profileName = profile.name;
        let newAge = profileAge = profile.age;
        let newGender = profileGender = profile.gender;
        let newInterests = profileInterests = profile.description;

        $("#profileSection").append(profileImg, newName, newAge, newGender, newInterests);


    })

});

$("#showAllMenBtn").click(function(){   
   $("#profileSection").html("");

    $(maleProfiles).each(function(index, profile){

        let profileImg = $("<img>", {src:`${profile.imageSrc}`});            
        let newName = profileName = profile.name;
        let newAge = profileAge = profile.age;
        let newGender = profileGender = profile.gender;
        let newInterests = profileInterests = profile.description;


        $("#profileSection").append(profileImg, newName, newAge, newGender, newInterests);
    })

});
于 2018-04-26T08:53:14.053 回答