数组续的每个DIV的div叠加层.(排序功能错误)

大坝我必须请您帮助我处理另一个错误。

我有这个代码，将我的列表列为列出。但是，现在的问题是，当我们按按钮对其进行整理。节目/隐藏功能不再起作用。测试并查看。由于某种原因，当您单击它时它确实可以工作，但不再起作用。

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

当您对Divs进行排序...您有点删除所有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!
}

请注意，这三个功能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 WICH被"委派"以处理第二个参数中指定的孩子上发生的事件。

在此处阅读有关委托的更多信息。

您的错误可能比您想象的要简单。您可能必须在创建动态元素的事实中，然后您拥有依赖这些元素的鼠标事件。最初创建元素时，将鼠标事件附加到它们时，当它们被删除并随后重新创建时，鼠标事件不会重新连接。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);
});

相关内容

最新更新

热门标签：