0
현재 jQuery를 연습하고 있습니다. 내 코드는 단순히 10 개의 목록 항목이있는 정렬되지 않은 목록입니다. 각 항목마다 다른 영화 이름이 있는데 $('li')이라는 변수를 $listItems이라는 변수에 저장합니다. .on method을 시도하는 중에 어색한 것을 보았습니다. 내 코드는 사용자가 mouseover 목록 항목 다음에 mouseout으로 날짜를 제거하면 각 목록 항목 옆에 오늘 날짜를 단순히 추가합니다. 그것은 HTML 파일에 쓴 목록 항목에 대해 잘 작동하지만 그것은 자바 스크립트를 사용하여 추가 한 목록 항목에 대해 제대로 작동하지 않습니다. 그러나 이것은 변수에 mouseover과 mouseout을 모두 생성 할 때만 발생합니다. 보통 $('li') 셀렉터를 사용하면 HTML을 통해 추가 한 항목과 자바 스크립트를 통해 추가 한 항목에 잘 작동합니다.변수에 대한 jQuery 선택 사항 저장이 다르게 동작합니다.
내 코드는 내가 이해하려고 노력하고있는 무슨 ::
jQuery를 선택 다르게 동작/*
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');
\t var newMovies = ['Fantastic Four','Spectre','Fast and Furious','Jupiter Ascending','007', 'Zero Hour', 'The Runner', 'Brave','Never Back Down'];
\t var newMovieEntry = document.createElement('li');
\t var newMovieName;
\t newMovies.forEach(function(movie) {
\t \t newMovieEntry = document.createElement('li');
\t \t newMovieName = document.createTextNode(movie);
\t \t newMovieEntry.appendChild(newMovieName);
\t \t newMovieEntry.textContent = movie;
\t \t mainUL.appendChild(newMovieEntry);
});
//Create date, day, month and year.
var date = new Date();
\t var day;
\t var month;
\t var year = date.getFullYear();
\t var dayNames = ['Sunday','Monday','Tuesday','Wednesday', 'Thursday', 'Friday', 'Saturday'];
\t var monthNames = ['Jan','Feb','Mar','Apr', 'May', 'Jun', 'July','Aug','Sep','Oct','Nov','Dec'];
\t day = dayNames[date.getDay()];
\t month = monthNames[date.getMonth()];
\t
//Append formatted date on mouseover.
\t $listItems.on('mouseover', function() {
\t \t $(this).append(" <em>(" + date.getDate() + "/" + month + "/" + year + ")</em>");
\t });
//Remove formatted date on mouseout
\t $listItems.on('mouseout', function(){
\t \t $(this).children('em').remove();
\t });
});
<!DOCTYPE html>
<html lang="en">
<head>
\t <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>
\t <meta charset="UTF-8">
\t <title>Hello world!</title>
\t <style type="text/css">
\t \t ul {
\t \t \t
\t \t \t text-align: center;
\t \t \t display: -webkit-flex;
\t \t \t display: -moz-flex;
\t \t \t display: -ms-flex;
\t \t \t display: -o-flex;
\t \t \t display: flex;
\t \t \t flex-direction: column;
\t \t \t flex-wrap: nowrap;
\t \t \t align-items: center;
\t \t \t justify-content: center;
\t \t }
\t \t li {
\t \t \t width: 60%;
\t \t \t border: 5px solid;
\t \t \t list-style-type: none;
\t \t \t margin: 10px;
\t \t \t line-height: 2em;
\t \t }
\t \t .newly-added {
\t \t \t background-color: #00ff00 !important;
\t \t \t color: #000 !important;
\t \t }
\t \t .royalblue {
\t \t \t background-color: #405BFF;
\t \t }
\t \t .hazyorange {
\t \t \t background-color: #FD8239;
\t \t }
\t \t .lightgreen {
\t \t \t background-color: #76FF76;
\t \t }
\t \t \t .watermelon {
\t \t \t background-color: #FC4343 !important;
\t \t }
\t </style>
</head>
<body>
\t <ul id="list">
\t \t <h1>Movies List</h1>
\t \t <li>Star Wars</li>
\t \t <li>Saving Private Ryan</li>
\t \t <li>Bridge of Spies</li>
\t \t <li>Avatar</li>
\t \t <li>Fury</li>
\t \t <li>Home Alone</li>
\t \t <li>Snowden</li>
\t \t <li>Inception</li>
\t \t <li>Wolf of Wall Street</li>
\t \t <li>Legend</li>
\t </ul>
</body>
</html>왜 보여 희망?
아, 자바 스크립트를 통해 새 목록 항목을 추가 한 후에 동일한 변수를 포함시키기 위해 동일한 변수에 다시 변수를 재 할당해야합니다. –
또는 그 지점에서 변수를 선언하십시오. –