Использование 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

Чистейшая способ, которым я могу думать о том, чтобы добавить дополнительный атрибут к каждому из флажков и ул элементов, например:

<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"> 

Вы можете п легко добавить выбранный элемент к совпадающим <ul> элемента, как это:

$('#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') это не самый лучший метод, вы хотите только добавить, если этот пункт был установлен, и убедитесь, чтобы удалить его, если он не был выбран. Если вы собираетесь делать это в любом масштабе, гораздо лучше использовать библиотеку, такую ​​как нокаут или магистраль, которые могут обрабатывать привязку, как это для вас. Решения такого рода проблема, используя исключительно JQuery может (и делает) быстро превращаются в запутанный код

Fiddle