jQuery，我认为它应该很简单。包括 jsfiddle

Question

我想在我选择的项目上创建一个列表，items 我的意思是任何<li> 类.service。所选项目具有 .selected 类，我希望所选项目的数据 #name 和 #price 以唯一的 <li class="one_like"> 显示在 <ul class="your_likes"> 中。

这是我的 JSFiddle，包含一个纯 html 示例。

我该怎么做？

Answer 1

这是你想要做的吗？首先，不要到处使用 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>