jQuery, ich denke, es sollte ziemlich einfach sein. Includes jsfiddle

Question

Ich möchte eine Liste über meine ausgewählten Artikel erstellen, indem Sie Artikel Ich meine jede <li> mit Klasse .service. Die ausgewählten Artikel haben die Klasse .selected und ich möchte, dass die Daten #name und #price für den ausgewählten Artikel in <ul class="your_likes"> mit einem eindeutigen <li class="one_like"> angezeigt werden.

Dies ist meine JSFiddle mit einem reinen HTML-Beispiel enthalten.

Wie kann ich das tun?

Answer 1

Ist das, was Sie versuchen zu tun? Als erstes solltest du keine IDs für den Namen und den Preis verwenden - benutze Klassen.

// step by step functionality 
 
var myTotal; 
 
$('.service').on('click', function(e) { 
 
    e.preventDefault(); 
 
    var $parent = $(this).closest('section') 
 
    // remove selected class from links after the current one 
 
    $parent.nextAll('section').find('li').removeClass('selected'); 
 
    // remove selected from siblings, toggle current selected class 
 
    $(this).toggleClass('selected'); 
 
    (!$parent.hasClass('multiple')) && $(this).siblings('li').removeClass('selected'); 
 
    var $target = $('#' + $(this).attr('data-id')); 
 
    if ($target.length) { 
 
    // hide any steps after the current one that may be shown 
 
    $parent.nextAll('section').find('.step').not($target).removeClass('active'); 
 
    // toggle display of selected step 
 
    $target.toggleClass('active', $(this).hasClass('selected')); 
 
    } else { 
 
    console.log('hmm'); 
 
    } 
 
}) 
 
// your selections incl. price & total 
 
$('.service').click(function() { 
 
    $('.hide-me-once-a-banana-is-clicked').hide('slow'); 
 
    $('ul.your_likes').show('slow'); 
 
    var myLike = $(".number-" + $(this).data("likes")); 
 
    myLike.children(".like").text($(this).children(".name").text()); 
 
    myLike.children(".price").text($(this).children(".price").text()); 
 

 
    // Now, somehow, calculate the total price... 
 
    myTotal = 0; 
 
    var myLikes = $(".your_likes .one_like"); 
 
    myLikes.each(function() { 
 
    myTotal += parseNumber($(this).children(".price").text()); 
 
    }) 
 

 
    $(".topay").children(".price").text(myTotal); 
 
}); 
 

 
function parseNumber(n) { 
 
    return Number(n.replace(/[^0-9\.-]+/g, "")) 
 
}

body { 
 
    color: #333; 
 
} 
 

 
h1 { 
 
    font-size: 20px; 
 
} 
 

 
.step { 
 
    display: none; 
 
} 
 

 
.active { 
 
    display: block; 
 
} 
 

 
.selected { 
 
    background: #27ae60 !important; 
 
    color: #fff !important; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
} 
 

 
li { 
 
    list-style: none; 
 
} 
 

 
.service { 
 
    padding: 20px; 
 
    color: #7f8c8d; 
 
    background: #ecf0f1; 
 
    display: inline-block; 
 
    border-radius: 10px; 
 
    cursor: pointer; 
 
    width: auto; 
 
    text-align: center; 
 
    font-size: 16px; 
 
    font-weight: 700; 
 
    margin-bottom: 5px; 
 
} 
 

 
.service.special.selected { 
 
    background: #3498db !important; 
 
} 
 

 
.hi { 
 
    color: #27ae60; 
 
    border-bottom: 2px dotted #27ae60; 
 
} 
 

 
h1 { 
 
    margin-top: 30px; 
 
    margin-bottom: 30px; 
 
} 
 

 
.hi.special { 
 
    border-bottom: 2px dotted #3498db; 
 
    color: #3498db; 
 
} 
 

 
#same_target { 
 
    margin-top: 30px; 
 
    background: #9b59b6; 
 
    padding: 20px; 
 
    color: #fff; 
 
} 
 

 
#same_target p { 
 
    margin-bottom: 0; 
 
} 
 

 
.nomarking { 
 
    -webkit-touch-callout: none; 
 
    -webkit-user-select: none; 
 
    -khtml-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
} 
 

 
.price { 
 
    display: block; 
 
    margin: 0; 
 
    font-size: 14px; 
 
    font-weight: 300; 
 
} 
 

 
ul.your_likes { 
 
    display: none; 
 
} 
 

 
ul.your_likes li { 
 
    list-style: none; 
 
    cursor: default; 
 
} 
 

 
ul.your_likes li.one_like .like { 
 
    display: inline-block; 
 
    font-size: 16px; 
 
} 
 

 
ul.your_likes li.one_like .price { 
 
    display: inline-block; 
 
    float: right; 
 
    font-size: 16px; 
 
    color: #4285f4; 
 
} 
 

 
ul.your_likes li.topay { 
 
    border-radius: 10px; 
 
    margin-bottom: 5px; 
 
    margin-top: 10px; 
 
} 
 

 
ul.your_likes li.topay .text { 
 
    display: inline-block; 
 
    font-size: 16px; 
 
    color: #000; 
 
    font-weight: bolder; 
 
} 
 

 
ul.your_likes li.topay .price { 
 
    display: inline-block; 
 
    float: right; 
 
    font-size: 16px; 
 
    color: #000; 
 
    font-weight: bolder; 
 
} 
 

 
ul.your_likes li.topay .lets_go button { 
 
    display: block; 
 
    margin-top: 10px; 
 
    font-weight: normal; 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-6"> 
 
     <!-- HELLO FIRST SECTION --> 
 
     <section> 
 
     <h1>Choose <span class="hi">one</span> thing you like</h1> 
 
     <ul> 
 
      <li class="service nomarking" data-id="one" data-likes="one"> 
 
      <span class="name">Hamburger</span> 
 
      <span class="price">€ 10</span> 
 
      </li> 
 
      <li class="service nomarking" data-id="two" data-likes="one"> 
 
      <span class="name">Pizza</span> 
 
      <span class="price">€ 5</span> 
 
      </li> 
 
      <li class="service nomarking" data-id="three" data-likes="one"> 
 
      <span class="name">Icecream</span> 
 
      <span class="price">€ 3</span> 
 
      </li> 
 
     </ul> 
 
     </section> 
 
     <!-- BYE FIRST SECTION --> 
 
     <!-- HELLO SECOND SECTION --> 
 
     <section> 
 
     <div id="one" class="step"> 
 
      <h1>Choose <span class="hi special">one</span> thing you like</h1> 
 
      <ul> 
 
      <li class="service nomarking" data-id="last" data-likes="two"> 
 
       <span class="name">Games</span> 
 
       <span class="price">€ 7</span> 
 
      </li> 
 
      <li class="service nomarking" data-id="last" data-likes="two"> 
 
       <span class="name">Soccer</span> 
 
       <span class="price">€ 2</span> 
 
      </li> 
 
      <li class="service nomarking" data-id="last" data-likes="two"> 
 
       <span class="name">Memes</span> 
 
       <span class="price">€ 1</span> 
 
      </li> 
 
      </ul> 
 
     </div> 
 

 
     <div id="two" class="step"> 
 
      <h1>Choose <span class="hi special">one</span> thing you like</h1> 
 
      <ul> 
 
      <li class="service nomarking" data-id="last" data-likes="two"> 
 
       <span class="name">Gossip Girl</span> 
 
       <span class="price">€ 7</span> 
 
      </li> 
 
      <li class="service nomarking" data-id="last" data-likes="two"> 
 
       <span class="name">Coding</span> 
 
       <span class="price">€ 8</span> 
 
      </li> 
 
      <li class="service nomarking" data-id="last" data-likes="two"> 
 
       <span class="name">Cats</span> 
 
       <span class="price">€ 6</span> 
 
      </li> 
 
      </ul> 
 
     </div> 
 

 
     <div id="three" class="step"> 
 
      <h1>Choose <span class="hi special">one</span> thing you like</h1> 
 
      <ul> 
 
      <li class="service nomarking" data-id="last" data-likes="two"> 
 
       <span class="name">Netflix</span> 
 
       <span class="price">€ 7</span> 
 
      </li> 
 
      <li class="service nomarking " data-id="last" data-likes="two"> 
 
       <span class="name">Reddit</span> 
 
       <span class="price">€ 9</span> 
 
      </li> 
 
      <li class="service nomarking" data-id="last" data-likes="two"> 
 
       <span class="name">Lady Gaga</span> 
 
       <span class="price">€ 20</span> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </section> 
 
     <!-- BYE SECOND SECTION --> 
 
     <!-- HELLO THIRD AND LAST SECTION --> 
 
     <section class="multiple"> 
 
     <div id="last" class="step"> 
 
      <h1>Choose <span class="hi special">more</span> of your liking!</h1> 
 
      <ul> 
 
      <li class="service nomarking" data-id="third" data-likes="three"> 
 
       <span class="name">Michael Jordan</span> 
 
       <span class="price">€ 23</span> 
 
      </li> 
 
      <li class="service nomarking " data-id="third" data-likes="three"> 
 
       <span class="name">Dogs</span> 
 
       <span class="price">€ 10</span> 
 
      </li> 
 
      <li class="service nomarking" data-id="third" data-likes="three"> 
 
       <span class="name">Cars</span> 
 
       <span class="price">€ 100</span> 
 
      </li> 
 
      </ul> 
 
     </div> 
 
     </section> 
 
     <!-- BYE THIRD AND LAST SECTION --> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <h1>Your likes</h1> 
 
     <p class="text-muted hide-me-once-a-banana-is-clicked"> 
 
     Click on something you like to make a order overview 
 
     </p> 
 
     <ul class="your_likes"> 
 
     <li class="one_like noselect number-one"> 
 
      <div class="like"> 
 
      Hamburger 
 
      </div> 
 
      <div class="price"> 
 
      € 8 
 
      </div> 
 
     </li> 
 
     <li class="one_like noselect number-two"> 
 
      <div class="like"> 
 
      Memes 
 
      </div> 
 
      <div class="price"> 
 
      € 1 
 
      </div> 
 
     </li> 
 
     <li class="one_like noselect number-three"> 
 
      <div class="like"> 
 
      Dogs 
 
      </div> 
 
      <div class="price"> 
 
      € 10 
 
      </div> 
 
     </li> 
 
     <li class="topay noselect"> 
 
      <div class="text"> 
 
      To pay 
 
      </div> 
 
      <div class="price"> 
 
      € 19 
 
      </div> 
 
      <div class="lets_go"> 
 
      <button class="btn btn-primary">Checkout</button> 
 
      </div> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>