저장 선택된 데이터 내가 동적으로 작성되는 항목의 목록을 다른 페이지

Question

에서 사용하는 이 링크의

나는 링크에서 발견 된 값을 저장하려면이 기능을 만든 :

function SaveData() { 
     localStorage["LessonID"] = $('#ListContainer').find('.lesson').attr('LessonID'); 
     localStorage["SubjectName"] = $('#ListContainer').find('.lesson_subject').text(); 
     } 

을하지만 "모든 데이터"저장합니다. 선택한 항목의 데이터 만 저장하려고합니다. 아이디어가 있으십니까? 감사합니다. .

Answer 1

find('.lesson')은 모든 링크가 #ListContainer 안에 있기 때문에 모든 데이터가 저장됩니다. 나는 당신의 인라인 이벤트 핸들러를 제거하고 on 방법으로 이벤트 위임을 활용 제안 : 나는 attr 대신 data 방법을 사용했습니다

$("#ListContainer").on("click", ".lesson", function() { 
    localStorage["LessonID"] = $(this).data("lessonid"); 
    localStorage["SubjectName"] = $(this).data("subject"); 
}); 

공지 사항.

<a href="Page.htm" rel="external" class="lesson" data-lessonid="someID" data-subject="someSubject"> 

이 HTML5에게이 요소에 임의의 데이터를 저장하기에 올 때 권장되는 방법입니다 data-* 속성을 사용합니다 : 그것은 당신의 마크 업에 또 다른 변화가 필요합니다.

---

왜 이벤트 위임을 사용합니까? 요소에 바인딩 된 이벤트 핸들러가 적어 지므로 더 효율적입니다. 모든 a.lesson 요소에 하나가 아니라 #ListContainer 요소에 하나만 있습니다.

대부분의 DOM 이벤트가 트리를 버블 링하기 때문에 #ListContainer의 자손 클릭이 DOM 트리를 통해 위로 튀어 나와 결국 #ListContainer에 도달합니다. jQuery on 메소드는이 요소에서 이벤트를 선택하고 .lesson과 일치하는 요소에서 발생했는지 확인합니다. 그렇다면 이벤트 처리기를 실행합니다.

Answer 2

이전 자바 스크립트와 jQuery가 혼합되어 있습니다.

$("<a ...")을 사용하여 요소를 만들고 추가 한 다음 해고 될 때 $(this)을 사용할 수있는 .click 처리기를 첨부하십시오. .click 처리기가 사용할 수있는 데이터를 추가 할 때 .data를 사용하여 요소에 데이터를 추가하십시오. @ 제임스 Allardice는 그의 대답에 보여처럼

Answer 3

변경이

onclick= "SaveData();" 

에

onclick= "SaveData(this);" 

그런 다음 더 나은

function SaveData(elem) { 
     localStorage["LessonID"] = $(elem).attr('LessonID'); 
     localStorage["SubjectName"] = $(elem).find('.lesson_subject').text(); 
     } 

또는에 saveData 기능을 변경, 당신은 $.on을 사용할 수 있습니다 .