javascript - div 覆盖数组 cont 中的每个 div。 (排序功能错误)

Question

该死，我不得不请你帮我解决另一个错误。

我有这段代码可以对我的列表进行排序。但是现在的问题是，当我们通过按下按钮来解决问题时。显示/隐藏功能不再起作用。测试一下看看。出于某种原因，当您单击它时它确实起作用，但不再起作用。

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

function hideOverlay() {
	"use strict";
	$(".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() {
	"use strict";
     arrayVariableDesign.sort(function(a, b){
    	var x = a.name.toLowerCase();
    	var y = b.name.toLowerCase();
    	if (x < y) {return -1;}
    	if (x > y) {return 1;}
		 return 0;
	 });
	$('.pagesListBtn').remove();
    displayDesign();
	hideOverlay();
}		
				
function sortType_Design() {
	"use strict";
     arrayVariableDesign.sort(function(a, b){
    	var x = a.type.toLowerCase();
    	var y = b.type.toLowerCase();
    	if (x < y) {return -1;}
    	if (x > y) {return 1;}
		 return 0;
	 });
	$('.pagesListBtn').remove();
    displayDesign();
	hideOverlay();
}
function sortCompany_Design() {
	"use strict";
     arrayVariableDesign.sort(function(a, b){
    	var x = a.company.toLowerCase();
    	var y = b.company.toLowerCase();
    	if (x < y) {return -1;}
    	if (x > y) {return 1;}
		 return 0;
	 });
	$('.pagesListBtn').remove();
    displayDesign();
	hideOverlay();
}
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();
}
	

.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>
   	<button onclick="sortType_Design()">Sort By Type</button>
   	<button onclick="sortCompany_Design()">Sort By Comapny</button>
   	<button onclick="sortDate_Design()">Sort By Date</button>
<div id="demo"></div>

Answer 1

当您对 div 进行排序时...您可以删除所有 div 并使用 displayDesign() 重新创建它们。

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

一个简单的方法(至少，这很简单!当您知道问题的原因时...)是在命名函数中进行处理程序设置，并在每次重新调用时调用它- 使用 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!
}

请注意，displayDesign()、hideOverlay() 和 setMouseHandlers() 这 3 个函数只能合并为一个。 .

这是一个CodePen这对您的所有排序都适用吗？
;)

---

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

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

该技术将函数附加到 #demo，它被“委托(delegate)”处理发生在其第二个参数中指定的子项上的事件。

阅读更多关于委派的信息 here .