如何允許特定部分進行多重選擇？

我正在一步一步地工作，我非常感謝已經從別人那裏得到了很多幫助。但我仍然沒有問完，但！如何允許特定部分進行多重選擇？

我的步驟分爲不同的<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

如何允許特定部分進行多重選擇？

回答

相關問題