사례: TodoList 업무 수행
// An highlighted block
$(function() {
load();
$('#title').keydown(function(e) {
if (e.keyCode == 13) {
if ($('#title').val().trim() == '') {
alert(' ');
return;
}
var preData = getData();
preData.push({ title: $('#title').val(), done: false });
localStorage.setItem('todolist', JSON.stringify(preData));
$('#title').val('');
load();
}
})
$('ul,ol').on('click', '.del', function() {
var preData = getData();
preData.splice($(this).attr('index'), 1);
localStorage.setItem('todolist', JSON.stringify(preData));
load();
})
$('ul,ol').on('click', '.fresh', function() {
var fresh = prompt(' ');
if (!fresh) return;
var preData = getData();
preData[$(this).attr('index')] = { title: fresh, done: $(this).siblings('input').prop('checked') };
localStorage.setItem('todolist', JSON.stringify(preData));
load();
})
$('ul,ol').on('click', 'input', function() {
var preData = getData();
preData[$(this).siblings('a').attr('index')].done = $(this).prop('checked');
localStorage.setItem('todolist', JSON.stringify(preData));
load();
})
function load() {
var preData = getData();
$('ul,ol').empty();
$.each(preData, function(index, domEle) {
var li = $(' ');
li.html('' + domEle.title + '' + '');
li.children('input').prop('checked', domEle.done);
domEle.done ? $('ul').prepend(li) : $('ol').prepend(li);
})
$('#todocount').text($('ol li').length);
$('#donecount').text($('ul li').length);
}
function getData() {
if (localStorage.getItem('todolist') != null) {
return JSON.parse(localStorage.getItem('todolist'));
} else return [];
}
})
위에서 비망록과 유사한 작은 기능을 실현하였다.핵심 원리는 본체를 이용하여 하나의 수조 todolist를 저장하는 것이다. 이 수조의 구성원은 대상을 저장하는데 title와down 두 개의 속성 값을 포함한다.키보드 이벤트 keydown과 input의change 이벤트가 터치되면 그룹 todolist의 값이 바뀌고load를 통해 다시 렌더링됩니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
