div覆盖数组中的每个div。 （排序功能错误）

Question

Dam我得请你帮我解决另一个错误。

我有这个代码，我的列表排序。但现在的问题是，当我们按下按钮进行分类时。显示/隐藏功能不再起作用。测试一下，看看。出于某种原因，当你点击它时它会工作，但不再工作。

$(document).ready(function() { 
 
\t sortDate_Design(); 
 
\t hideOverlay(); 
 
\t $(".pagesListBtn").mouseenter(function() { 
 
\t \t $(this).find(".pagesListOverlay").fadeIn(200); 
 
\t }); 
 
    \t $(".pagesListBtn").mouseleave(function() { 
 
\t \t $(this).find(".pagesListOverlay").fadeOut(200); 
 
    \t }); 
 
}); 
 

 
function hideOverlay() { 
 
\t "use strict"; 
 
\t $(".pagesListOverlay").fadeOut(2000); 
 
} 
 

 

 

 
var arrayVariableDesign = [ 
 
    {name: "object1", type:"type1", company:"company1", dateYear:"2017", dateMonth:"08", dateDay:"24", image:"../images/preview/noimg.png"}, 
 
    {name: "object2", type:"type1", company:"company1", dateYear:"2017", dateMonth:"01", dateDay:"20", image:"../images/preview/noimg.png"}, 
 
    {name: "object3", type:"type2", company:"company2", dateYear:"2016", dateMonth:"08", dateDay:"24", image:"../images/preview/noimg.png"}, 
 
    {name: "object4", type:"type3", company:"company3", dateYear:"2016", dateMonth:"03", dateDay:"04", image:"../images/preview/noimg.png"}, 
 
    {name: "object5", type:"type1", company:"company2", dateYear:"2017", dateMonth:"02", dateDay:"24", image:"../images/preview/noimg.png"}, 
 
    {name: "object6", type:"type2", company:"company1", dateYear:"2017", dateMonth:"08", dateDay:"20", image:"../images/preview/noimg.png"}, 
 
]; 
 
var arrayLength_Design = arrayVariableDesign.length; 
 
var temp_Design; 
 
    
 
function displayDesign() { 
 
    
 
    for (i = 0; i < arrayLength_Design; i++) { 
 
    var sortDate_Design = arrayVariableDesign[i].dateYear + arrayVariableDesign[i].dateMonth + arrayVariableDesign[i].dateDay; 
 
    temp_Design = document.createElement('div'); 
 
    temp_Design.className = 'pagesListBtn mobilePagesListBtn'; 
 
    temp_Design.style.background = "url(" + arrayVariableDesign[i].image.src + ")"; // https://stackoverflow.com/questions/9790347/set-an-image-object-as-a-div-background-image-using-javascript 
 
    temp_Design.style.backgroundSize = "100%"; 
 
    temp_Design.style.backgroundRepeat = "no-repeat"; 
 
    temp_Design.style.backgroundPosition = "50% 50%"; 
 
    temp_Design.style.backgroundColor = "#C02024"; 
 
    temp_Design.innerHTML = "<div class='pagesListOverlay mobilePagesListOverlayBtn'>" + arrayVariableDesign[i].name + " for " + arrayVariableDesign[i].company + "<br>" + arrayVariableDesign[i].type + "<br>" + arrayVariableDesign[i].dateDay + "/" + arrayVariableDesign[i].dateMonth + "/" + arrayVariableDesign[i].dateYear + "</div>"; 
 
    document.getElementById("demo").appendChild(temp_Design); 
 
    } 
 
} 
 

 
function sortName_Design() { 
 
\t "use strict"; 
 
    arrayVariableDesign.sort(function(a, b){ 
 
    \t var x = a.name.toLowerCase(); 
 
    \t var y = b.name.toLowerCase(); 
 
    \t if (x < y) {return -1;} 
 
    \t if (x > y) {return 1;} 
 
\t \t return 0; 
 
\t }); 
 
\t $('.pagesListBtn').remove(); 
 
    displayDesign(); 
 
\t hideOverlay(); 
 
} \t \t 
 
\t \t \t \t 
 
function sortType_Design() { 
 
\t "use strict"; 
 
    arrayVariableDesign.sort(function(a, b){ 
 
    \t var x = a.type.toLowerCase(); 
 
    \t var y = b.type.toLowerCase(); 
 
    \t if (x < y) {return -1;} 
 
    \t if (x > y) {return 1;} 
 
\t \t return 0; 
 
\t }); 
 
\t $('.pagesListBtn').remove(); 
 
    displayDesign(); 
 
\t hideOverlay(); 
 
} 
 
function sortCompany_Design() { 
 
\t "use strict"; 
 
    arrayVariableDesign.sort(function(a, b){ 
 
    \t var x = a.company.toLowerCase(); 
 
    \t var y = b.company.toLowerCase(); 
 
    \t if (x < y) {return -1;} 
 
    \t if (x > y) {return 1;} 
 
\t \t return 0; 
 
\t }); 
 
\t $('.pagesListBtn').remove(); 
 
    displayDesign(); 
 
\t hideOverlay(); 
 
} 
 
function sortDate_Design() { 
 
\t "use strict"; 
 
    arrayVariableDesign.sort(function(a, b){ 
 
    \t var x = a.dateYear.toLowerCase() + a.dateMonth.toLowerCase() + a.dateDay.toLowerCase(); 
 
    \t var y = b.dateYear.toLowerCase() + a.dateMonth.toLowerCase() + a.dateDay.toLowerCase(); 
 
    \t if (x < y) {return -1;} 
 
    \t if (x > y) {return 1;} 
 
\t \t return 0; 
 
\t }); 
 
\t $('.pagesListBtn').remove(); 
 
    displayDesign(); 
 
\t hideOverlay(); 
 
} 
 
\t

.pagesListBtn { 
 
    /*z-index: 500;*/ 
 
    background-color: #C02024; 
 
    /*display: inline-block;*/ 
 
    display:block; 
 
} 
 

 
.pagesListBtn:hover { 
 
    background-color: #920400;  
 
} 
 

 
.pagesListOverlay { 
 
    padding: 0; /* changed */ 
 
    margin: 0; /* changed */ 
 
    height: 150px; /* added */ 
 
    opacity: 0.8; 
 
    display: inherit; 
 
    background-color: white; 
 
    text-align: center; 
 
    vertical-align: bottom; 
 
    text-decoration:none; 
 
    font-weight:900; 
 
    line-height:30px; 
 
} 
 

 
.mobilePagesListBtn { 
 
    height: 150px;  /* added */ 
 
    /*min-height:150px; 
 
    max-height:150px;*/ 
 
    width: 100%; /*295px*/ 
 
    padding: 0; 
 
    margin-top: 25px; 
 
    /*margin-bottom: -15px;*/ 
 
} 
 

 
.mobilePagesListOverlayBtn { 
 
    /*min-height:150px; 
 
    max-height:150px;*/ 
 
    padding:0; /* added */ 
 
    height: 150px; 
 
    width: 100%; /*295px*/ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> 
 
<button onclick="sortName_Design()">Sort By Name</button> 
 
    \t <button onclick="sortType_Design()">Sort By Type</button> 
 
    \t <button onclick="sortCompany_Design()">Sort By Comapny</button> 
 
    \t <button onclick="sortDate_Design()">Sort By Date</button> 
 
<div id="demo"></div>

Answer 1

当你的div排序...你有种删除所有的div并使用displayDesign()重新创建它们。

这是正确的，但事件处理程序已附加到已删除的元素。您必须将mouseenter和mouseleave事件的功能重新绑定到新元素。

一个简单的方法（至少，很容易！当你知道这些问题的原因......）是使处理器在一个名为功能设置，并调用它每次重新使用displayDesign()时间。

function setMouseHandlers(){ 
    $(".pagesListBtn").mouseenter(function() { 
    $(this).find(".pagesListOverlay").fadeIn(200); 
    }); 
    $(".pagesListBtn").mouseleave(function() { 
    $(this).find(".pagesListOverlay").fadeOut(200); 
    }); 
} 

然后打电话给它！

function sortDate_Design() { 
    "use strict"; 
    arrayVariableDesign.sort(function(a, b){ 
    var x = a.dateYear.toLowerCase() + a.dateMonth.toLowerCase() + a.dateDay.toLowerCase(); 
    var y = b.dateYear.toLowerCase() + a.dateMonth.toLowerCase() + a.dateDay.toLowerCase(); 
    if (x < y) {return -1;} 
    if (x > y) {return 1;} 
    return 0; 
    }); 
    $('.pagesListBtn').remove(); 
    displayDesign(); 
    hideOverlay(); 
    setMouseHandlers(); // <-- Handlers are setted here! 
} 

注意，那些3个功能，displayDesign()，hideOverlay()和setMouseHandlers()，可以合并成只有一个......

这里是一个CodePen是这个工程罚款所有的分类法，。
;）

---

另一种方法是使用事件委托。

$("#demo").on("mouseenter", ".pagesListBtn", function() { 
    $(this).find(".pagesListOverlay").fadeIn(200); 
}); 
$("#demo").on("mouseleave", ".pagesListBtn", function() { 
    $(this).find(".pagesListOverlay").fadeOut(200); 
}); 

这种技术重视#demo至极被“下放”来处理存在的关于其子在第二个参数命名的事件的功能。

阅读更多关于代表团here。

Answer 2

您的错误可能比您想象的要简单。您可能必须考虑到您正在创建动态元素，然后您有依赖于这些元素的鼠标事件。当元素最初创建时，鼠标事件会附加到它们，当它们被删除并稍后重新创建时，鼠标事件不会被重新附加。 jQuery的“on”函数最适合处理动态创建的元素。而不是定位您的父元素，然后找到“pagesListOverlay”类，您可以只针对该类。但是，我不知道为什么你的HTML看起来像这样，这是一个猜测。如果将该父项作为目标是您的需求的一部分，那么我也可以展示这一点。

$(".pagesListOverlay").on("mouseenter", function() { 
    $(this).fadeIn(200); 
}); 
$(".pagesListOverlay").on("mouseleave", function() { 
    $(this).fadeOut(200); 
}); 

这也可能工作并且更短。

$(".pagesListOverlay").on("mouseenter", function() { 
    $(this).fadeIn(200); 
}).mouseleave(function() { 
    $(this).fadeOut(200); 
});