Wie kann ich einem bestimmten Bereich eine Mehrfachauswahl erlauben?

Question

Ich arbeite an Schritt für Schritt Auftrag, und ich bin so dankbar dafür, dass ich bereits viel Hilfe von anderen erhalten habe. Ich bin immer noch nicht fertig mit Fragen.

Meine Schritte sind in verschiedene <section> unterteilt und ich würde gerne eine <section> eine class="multiple" geben, damit dieser spezifische Abschnitt mehrere Auswahlen haben kann. Ich benutze .selected, um entweder zu bestimmen, ob <li> ausgewählt wurde oder nicht.

Dies ist mein aktueller Code:

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

Also meine Frage ist, was kann ich mit meinem Code tue mehr ausgewählten Elemente zu machen <section class="multiple> erlaubt?

This is my JSFiddle. Klicken Sie auf die Elemente, um den letzten Schritt zu erhalten. Dies sollte der Abschnitt sein, der mehrere Auswahlmöglichkeiten zulässt.

Danke für die Hilfe.

Answer 1

prüfen .multiple bevor die .selected Klasse aus dem Menü li ‚s zu entfernen. 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>

Answer 2

Unter den Möglichkeiten, wie ich diese beiden Ansätze:

1. Assign class="single" zur vorherigen Abschnitten und zwei ähnliche Funktionen erstellen, ein ausgelöst auf $('li .single').on('click',function(e)... und das andere mit $('li .multiple').on('click',function(e).... Das erste du hast es schon. Ändern Sie die zweite $(this).siblings('li').removeClass('selected') aus, so dass Sie mehrere Elemente auswählen können.

2. Die zweite Option wäre, die einzelne '$ (' li .single ') eingeschaltet zu lassen (' click ', function (e) ...'), aber Aktionen auf den Umfang eines IF/THEN zu setzen wenn der Benutzer auf einem einzelnen oder mehrere Abschnitt geklickt und wieder nicht $(this).siblings('li').removeClass('selected') wenn innerhalb des .multiple Abschnitts

Answer 3

Ich würde dies ändern:

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

dazu:

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