Question

我正在按照一步一步的顺序工作，我非常感谢已经从别人那里得到了很多帮助。不过我还是没有问过！

我的步骤分为不同的<section>，我想提供一个<section>一个class="multiple"，以允许此特定部分进行多项选择。我使用.selected来确定是否已选择<li>。

这是我目前的代码：

$('li').on('click', function(e) {
   e.preventDefault();
   // remove selected class from links after the current one
   $(this).closest('section').nextAll('section').find('li').removeClass('selected');
   // remove selected from siblings, toggle current selected class
   $(this).siblings('li').removeClass('selected').end().toggleClass('selected');
   var $target = $('#' + $(this).attr('data-id'));
   if ($target.length) {
       // hide any steps after the current one that may be shown
       $(this).closest('section').nextAll('section').find('.step').not($target).removeClass('active');
       // toggle display of selected step
       $target.toggleClass('active', $(this).hasClass('selected'));
   } else {
       console.log('do something else to end this thing');
   }
})

所以我的问题是，我可以使用我的代码使<section class="multiple>允许多个所选项目？

This is my JSFiddle。单击项目以获取最后一步，该步骤应该是允许多个选择的部分。

感谢您的帮助。

Answer 1

在我喜欢这两种方法的可能性中：

将class="single"分配给前面的部分并创建两个类似的功能，一个在$('li .single').on('click',function(e)...上触发，另一个在$('li .multiple').on('click',function(e)...上触发。你已经拥有它的第一个。修改第二个$(this).siblings('li').removeClass('selected')，以便您可以选择多个项目。
第二个选项是保持单个＆＃39; $（＆＃39; li .single＆＃39;）。（＆＃39;点击＆＃39;，功能（e）...... ＆＃39;但是对IF / THEN的范围进行操作以检查用户是否点击了单个或多个部分，如果在$(this).siblings('li').removeClass('selected')部分内部再次发现.multiple

Answer 2

在从.multiple菜单中删除.selected课程之前检查li。 https://jsfiddle.net/979aL2g5/7/

＆＃13;

$('li').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('do something else to end this thing');
  }
})

＆＃13;

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;
}
.bananas {
  padding: 20px;
  color: #7f8c8d;
  background: #ecf0f1;
  display: inline-block;
  border-radius: 10px;
  cursor: pointer;
  width: 25%;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 5px;
}
.bananas.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;
}
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="container">
  <section>
    <h1>First step, please choose something</h1>
    <ul>
        <li class="bananas nomarking" data-id="one">
          Sprite
        </li>
        <li class="bananas nomarking" data-id="two">
          King Kong
        </li>
        <li class="bananas nomarking" data-id="three">
          Astronauts
        </li>
      </ul>
  </section>

  <section>
    <div id="one" class="step">
    <h1>Second step for <span class="hi">Sprite</span> - choose another</h1>
      <ul>
        <li class="bananas nomarking" data-id="third">
          McDonalds
        </li>
        <li class="bananas nomarking " data-id="third">
          Burger King
        </li>
        <li class="bananas nomarking" data-id="third">
          Tim Hortons
        </li>
      </ul>
    </div>

    <div id="two" class="step">
      <h1>Second step for <span class="hi">King Kong</span> - choose another</h1>
      <ul>
        <li class="bananas nomarking" data-id="third">
          McDonalds
        </li>
        <li class="bananas nomarking" data-id="third">
          Burger King
        </li>
        <li class="bananas nomarking" data-id="third">
          Tim Hortons
        </li>
      </ul>
    </div>

    <div id="three" class="step">
      <h1>Second step for <span class="hi">Astronauts</span> - choose another</h1>
      <ul>
        <li class="bananas nomarking" data-id="third">
          McDonalds
        </li>
        <li class="bananas nomarking" data-id="third">
          Burger King
        </li>
        <li class="bananas nomarking" data-id="third">
          Tim Hortons
        </li>
      </ul>
    </div>
  </section>

  <section class="multiple">
    <div id="third" class="step">
      <h1>Multiple <span class="hi special">selections</span> section - choose under</h1>
      <ul>
        <li class="bananas special nomarking">
          Hamburger
        </li>
        <li class="bananas special nomarking">
          Coffee
        </li>
        <li class="bananas special nomarking">
          Stackoverflow
        </li>
        <li class="bananas special nomarking">
          Australia
        </li>
        <li class="bananas special nomarking">
          Oldschool
        </li>
        <li class="bananas special nomarking">
          Deadpool
        </li>
      </ul>
    </div>
  </section>
</div>

＆＃13;

Answer 3

我会改变这个：

// remove selected from siblings, toggle current selected class
$(this).siblings('li').removeClass('selected').end().toggleClass('selected');

到此：

// remove selected from siblings if not multiple
if (!$(this).closest('section').hasClass('multiple')) {
    $(this).siblings('li').removeClass('selected');
}
// toggle current selected class
$(this).toggleClass('selected');

如何允许特定部分进行多项选择？

3 个答案: