Question

我目前正在练习jQuery。我的代码只是一个无序列表，有10个列表项。每个项目都有一个不同的电影名称，我将选择$('li')保存到一个名为$listItems的变量中。在尝试.on method时，我遇到了一些尴尬的事情。当用户mouseover列表项然后用mouseout删除日期时，我的代码只会在每个列表项旁边附加今天的日期。它适用于我在HTML文件中编写的列表项，但它对我使用javascript添加的列表项无法正常工作。但是，仅当我在变量mouseover上创建mouseout和$listItems时，才会发生这种情况。当我使用普通$('li')选择器时，它适用于我通过HTML添加的项目和通过javascript添加的项目。

希望我的代码说明我想要了解的内容::

＆＃13;

/*

This DOESN'T append the date to list items added via JAVASCRIPT on mouseover 
    when the $('li') selection is saved to a variable, however it works fine if I used $('li') on mouseover and mouseout...
*/

$(document).ready(function(){
var $listItems = $('li');

//Add items to the unordered list using javascript
    var mainUL = document.getElementById('list');
	var newMovies = ['Fantastic Four','Spectre','Fast and Furious','Jupiter Ascending','007', 'Zero Hour', 'The Runner', 'Brave','Never Back Down'];
	var newMovieEntry = document.createElement('li');
	var newMovieName;

	newMovies.forEach( function(movie) {
		newMovieEntry = document.createElement('li');
		newMovieName = document.createTextNode(movie);
		newMovieEntry.appendChild(newMovieName);
		newMovieEntry.textContent = movie;
		mainUL.appendChild(newMovieEntry);
      });

//Create date, day, month and year.
var date = new Date();
	var day;
	var month;
	var year = date.getFullYear();
	var dayNames = ['Sunday','Monday','Tuesday','Wednesday', 'Thursday', 'Friday', 'Saturday'];
	var monthNames = ['Jan','Feb','Mar','Apr', 'May', 'Jun', 'July','Aug','Sep','Oct','Nov','Dec'];
	day = dayNames[date.getDay()];
	month = monthNames[date.getMonth()];
	
//Append formatted date on mouseover.
	$listItems.on('mouseover', function() {

		$(this).append(" <em>(" + date.getDate() + "/" + month + "/" + year + ")</em>");

	});

//Remove formatted date on mouseout
	$listItems.on('mouseout', function(){
		$(this).children('em').remove();
	});
});

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<script
  src="http://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
  <script type="text/javascript" src="junk.js"></script>
	<meta charset="UTF-8">
	<title>Hello world!</title>
	<style type="text/css">

		ul {
			
			text-align: center;
			display: -webkit-flex;
			display: -moz-flex;
			display: -ms-flex;
			display: -o-flex;
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: center;
		}

		li {
			width: 60%;
			border: 5px solid;
			list-style-type: none;
			margin: 10px;
			line-height: 2em;
		}

		.newly-added {
			background-color: #00ff00 !important;
			color: #000 !important;
		}

		.royalblue {
			background-color: #405BFF;
		}

		.hazyorange {
			background-color: #FD8239;
		}

		.lightgreen {
			background-color: #76FF76;
		}

			.watermelon {
			background-color: #FC4343 !important;
		}
	</style>
</head>
<body>
	<ul id="list">
		<h1>Movies List</h1>
		<li>Star Wars</li>
		<li>Saving Private Ryan</li>
		<li>Bridge of Spies</li>
		<li>Avatar</li>
		<li>Fury</li>
		<li>Home Alone</li>
		<li>Snowden</li>
		<li>Inception</li>
		<li>Wolf of Wall Street</li>
		<li>Legend</li>
	</ul>
</body>
</html>

＆＃13;

为什么jQuery选择行为不同？

Answer 1

将HTML中存在的列表项存储到变量中，然后添加新项。这不会更新您的变量，因此添加的项目不会接收.on方法的功能。

将jQuery选择保存到变量表现不同

1 个答案: