Question

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

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

＆＃13;

$(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();
}

＆＃13;

.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*/
}

＆＃13;

<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>

＆＃13;

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);
});

div为数组cont中的每个div重叠。（排序功能错误）

2 个答案:

div为数组cont中的每个div重叠。 （排序功能错误）

2 个答案:

div为数组cont中的每个div重叠。（排序功能错误）