jQuery를 사용하여 다른 요소에 데이터 전달

Question

가짜 장바구니 페이지를 만들고 있습니다. 나는 그 (것)들에 데이타 속성을 가진 체크 박스를 가지고 있고 그 다음 각 체크 박스 요소와 일치해야하는 UL을 가지고있다. 확인란의 데이터 속성을 해당 UL 항목으로 전달하고 싶습니다. 내 목록 항목 각각에 데이터 속성을 추가하고 비교 일치합니까? 어떻게하면 좋을까요? 내 HTML 구조는 아래와 같습니다. 나는 아래로 가지고 투표를하는 이유

<!--Attendee checkbox list--> 
<div id="attendeeList"> 
    <input type="checkbox" name="attendee" title="Attendee One" data-productname="Product Awesome" data-attendeename="AttendeeOne" data-optionprice="7.00" /> 
    <input type="checkbox" name="attendee" title="Attendee Two" data-productname="Product Awesome" data-attendeename="AttendeeTwo" data-optionprice="7.00" /> 
    <input type="checkbox" name="attendee" title="Attendee Three" data-productname="Product Awesome" data-attendeename="AttendeeThree" data-optionprice="7.00" /> 
    <input type="checkbox" name="attendee" title="Attendee Four" data-productname="Product Awesome" data-attendeename="AttendeeFour" data-optionprice="7.00" /> 
    <input type="checkbox" name="attendee" title="Attendee Five" data-productname="Product Awesome" data-attendeename="AttendeeFive" data-optionprice="7.00" /> 
</div> 
<!--On Page Shopping Cart--> 
<ul id="shoppingCart"> 
    <li id="AttendeeOne"> 
    <h5>Attendee One</h5> 
     <ul class="attendeeProductList"> 
     <!--Need to append product name and price to this list--> 
     <li></li> 
     </ul> 
    </li> 
    <li id="AttendeeTwo"> 
    <h5>Attendee Two</h5> 
     <ul class="attendeeProductList"> 
     <!--Need to append product name and price to this list--> 
     <li></li> 
     </ul> 
    </li> 
    <li id="AttendeeThree"> 
     <h5>Attendee Three</h5> 
     <ul class="attendeeProductList"> 
     <!--Need to append product name and price to this list--> 
     <li></li> 
     </ul> 
    </li> 
    <li id="AttendeeFour"> 
    <h5>Attendee Four</h5> 
     <ul class="attendeeProductList"> 
     <!--Need to append product name and price to this list--> 
     <li></li> 
     </ul> 
    </li> 
    <li id="AttendeeFive"> 
    <h5>Attendee Five</h5> 
     <ul class="attendeeProductList"> 
     <!--Need to append product name and price to this list--> 
     <li></li> 
     </ul> 
    </li> 
</ul> 

코멘트

먼저 떨어져 모르겠어요. jQuery에서 여러 객체를 탐색하는 방법에 정통하지 않은 사람들에게 좋은 질문입니다. 이것이 내가이 사이트가 생각한 것입니다. 질문을하고 정당한 질문에 투표하는 것이 아니라 필요한 사람들에게 답변을 제공하는 것이 었습니다. 나는 HTML 구조를 제공했고, 올바른 방향으로 갈 수 있도록 포인터가 필요했습니다. 저에게 결과에 대한 지침과 지침을 제공 한 사람들에게 감사드립니다.

Answer 1

각 체크 박스에 대한 목록이 필요한 이유가 명확하지 않더라도 마크 업에 정의 된 것의 대부분을 갖고있는 것처럼 보입니다.

여기, 당신이

/* checkbox change handler */ 
$('#attendeeList :checkbox').change(function(){ 
    var data=$(this).data(), 
     /* get jQuery selector for list from data */ 
     jQId = "#" + data.attendeename, 
     $list=$(jQId).find('.attendeeProductList'); 

    if(this.checked){ 
     /* add element if checked*/ 
     var li= '<li>Name:'+ data.attendeename +', Price:'+data.optionprice+'</li>'; 
     $list.append(li); 
    }else{ 
     /* empty list if unchecked*/ 
     $list.empty(); 
    } 

}) 

DEMO

Answer 2

나는 당신의 체크 박스와 UL의 각 요소에 추가 속성을 추가하는 것입니다 생각할 수있는 가장 깨끗한 방법으로 시작하는 것입니다 뭔가 좋아요 :

<input type="checkbox" name="attendee" title="Attendee One" data-productname="Product Awesome" data-attendeename="AttendeeOne" data-optionprice="7.00" data-target="attendee-1"/> 
<ul class="attendeeProductList" data-target="attendee-1"> 

$('#attendeeList input[type="checkbox"]').on('click', function() { 
    var productName = $(this).attr('data-productname'); 
    var productPrice = $(this).attr('data-optionprice'); 
    var target = $(this).attr('data-target'); 

    $('ul[data-target="' + target + '"]').append('<li>' + productName + ': ' + productPrice + '</li>'); 
}); 

은 분명히 .on('click') 최고의 방법이 아닙니다, 당신은 단지 항목이 확인 된 경우에 추가하려면, 그리고 경우에 제거해야합니다 것 : n은 쉽게이 같은 일치 <ul> 요소에 선택한 항목을 추가 그것은 선택되지 않았다. 규모에 상관없이이 작업을 수행하려는 경우 이와 같은 바인딩을 처리 할 수있는 녹아웃 또는 백본과 같은 라이브러리를 사용하는 것이 훨씬 좋습니다. 독점적으로 사용하여 문제의이 종류에 솔루션 jQuery를 (그리고 않음) 신속하게

Fiddle