我正在按部就班地工作，我很感激已经从他人那里得到了很多帮助。不过，我仍然没有完成询问！
我的步骤分为不同的步骤<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。单击项目以获取最后一步，该步骤应该是允许多个选择的部分。
谢谢您的帮助。
从菜单的.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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句