這是你想要做的嗎?首先,不要在所有地方使用ID作爲名稱和價格 - 使用類。
// 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>
請給一個更好的標題,描述問題* ... – Li357
一個*並張貼[MCVE] **在你的問題** – j08691
你應該做的是不是在'你喜歡'中顯示* all *選項,只需根據選項中的'selected'值填充'你喜歡的'內容。 –