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

我正在一步一步地工作，我非常感谢已经从别人那里得到了很多帮助。但我仍然没有问完，但！如何允许特定部分进行多重选择？

我的步骤分为不同的<section>，我想给一个<section> a 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。点击这些项目以获得最后一步，这应该是允许多个选择的部分。

感谢您的帮助。

来源

2017-02-20 superladremi

请问你只需要在最后一步一个'.multiple'类，或者换句话说，在一步之后没有任何步骤？ –

@MichaelCoker在选出至少一个李后，还有一步。对编辑抱歉。 – superladremi

检查.multiple从菜单中去除.selected类li的面前。https://jsfiddle.net/979aL2g5/7/

$('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'); 
 
    } 
 
})

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; 
 
} 
 
}

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

来源

2017-02-20 17:11:40

这是超级。看到你所改变的只是一条线来实现我所寻找的东西，几乎处于个人挫败的边缘。我有很多要学习的。再次感谢，英雄！ – superladremi

@superladremi不客气！我已经做了大约9年。初学者通常不得不扔掉他们遇到问题时的每一个工具，而且通常只是开始改变东西，直到出现问题。大师可以进行精确的手术，立即发现问题，并做出所需的微小改变。它带有经验就是全部。我已经在你的项目上做过几次了，所以我对它有点熟悉:) –

当然，如果我有那9年，我可能会回答而不是问，但现在我就是这样。是的，你已经做了几次，我不会忘记，所以谢谢你再次帮助我：o） – superladremi

在准备我喜欢这两种方法：

分配class="single"前面章节并创建两个类似的功能，引发了$('li .single').on('click',function(e)...一个和其他与$('li .multiple').on('click',function(e)...。第一个你已经拥有它。修改第二个取出$(this).siblings('li').removeClass('selected')，以便您可以选择多个项目。（'click'，function（e）...'），但是在IF/THEN的作用域中加入动作来检查如果用户点击了单个或多个部分，并再次不$(this).siblings('li').removeClass('selected')如果.multiple部分内

来源

2017-02-20 17:04:56 zJorge

我会改变这样的：

// 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');

来源

2017-02-20 17:12:05

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

回答

相关问题