मैं चरणबद्ध क्रम पर काम कर रहा हूं, और मैं पहले से ही दूसरों से बहुत मदद प्राप्त करने के लिए बहुत आभारी हूं। हालाँकि, मैंने अभी भी पूछना पूरा नहीं किया है!

मेरे कदम अलग-अलग <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> कई चयनित वस्तुओं को अनुमति दे सके?

यह मेरी JSFiddle है। अंतिम चरण प्राप्त करने के लिए आइटम पर क्लिक करें, जो कि वह अनुभाग होना चाहिए जो कई चयनों की अनुमति देता है।

सहायता के लिए धन्यवाद।

4
user7589192 20 फरवरी 2017, 19:44

3 जवाब

सबसे बढ़िया उत्तर

मेनू li से .selected वर्ग को हटाने से पहले .multiple की जांच करें। 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>
1
Michael Coker 20 फरवरी 2017, 20:11

संभावनाओं के बीच मुझे ये दो दृष्टिकोण पसंद हैं:

  1. पिछले अनुभागों को class="single" असाइन करें और दो समान फ़ंक्शन बनाएं, एक $('li .single').on('click',function(e)... पर ट्रिगर हुआ और दूसरा $('li .multiple').on('click',function(e)... के साथ। पहला आपके पास पहले से ही है। $(this).siblings('li').removeClass('selected') को निकाल कर दूसरे को संशोधित करें ताकि आप एक से अधिक आइटम का चयन कर सकें।

  2. दूसरा विकल्प यह होगा कि सिंगल '$('li .single').on('click',function(e)...' को रखा जाए, लेकिन यह जांचने के लिए कि उपयोगकर्ता ने क्लिक किया है या नहीं, IF/THEN के दायरे में कार्रवाई करें। एक या एक से अधिक अनुभाग और फिर $(this).siblings('li').removeClass('selected') अगर .multiple अनुभाग के अंदर नहीं है

1
zJorge 20 फरवरी 2017, 20:04

मैं इसे बदल दूंगा:

// 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');
1
Matt Sach 20 फरवरी 2017, 20:12