我试图让使用jQuery某种动态的清单,但我遇到了一些问题,我似乎无法来解决,由于我缺乏完整的脚本编写技能。码的当前状态可以在下面找到。
其基本思路是,有一组附加功能“模块1”,而“模块2”具有相同的功能,“模块1”,但也有一些额外的为好,因此,“模块1”当选择“模块-2”的特性应该仍然是可见的。到目前为止,我只能够得到的特征为每个模块分别突出,却不能在一起。
重要的细节:我想保持剧本尽可能地灵活。这是非常有可能会出现在未来的3个或4个模块,总是将以前的模块的功能。
如何将一个继续前进,完成这件事?
提前致谢!
var module_group = $('.module-group');
$(module_group).each(function() {
var module_box = $(this).children('.module-toggle');
$(module_box).click(function() {
$(this).parent('.module-group').children('.module-toggle').removeClass('module-toggle--on');
$(this).addClass('module-toggle--on');
if ($(this).hasClass('module-toggle--on')) {
var data_value = $(this).attr('data-id');
$(this).parent().children('.module-features').find('li').each(function() {
if ($(this).hasClass(data_value)) {
$(this).addClass('checked');
} else {
$(this).removeClass('checked');
}
});
};
});
});
.checked {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="module-group">
<div class="module-toggle module-toggle--on" data-id="module-1">
Module 1
</div>
<div class="module-toggle module-toggle--on" data-id="module-2">
Module 2
</div>
<div class="module-features">
<ul>
<li class="module-1">Module 1 feature</li>
<li class="module-1">Module 1 feature</li>
<li class="module-1">Module 1 feature</li>
<li class="module-2">Module 2 feature</li>
<li class="module-2">Module 2 feature</li>
<li class="module-2">Module 2 feature</li>
</ul>
</div>
</div>
像这样的事情?
变化:我已经添加了一行从切换第一删除所有checked
类。从来没有任何在这个水平之前,但我会略低于添加它们:
$(".module-toggle").removeClass('checked');
现在没有任何一个模块切换都亮显。然后,我添加了一个线,增加了checked
类所单击切换,而this
仍是拨动本身,而不是孩子,迭代当那些
$(this).addClass('checked');
这是所有你需要改变。的模块功能的选择可能只是跳过部分(this).parent().children
与$('.module-features')
开始,同样的结果,但它像它太。
var module_group = $('.module-group');
$(module_group).each(function() {
var module_box = $(this).children('.module-toggle');
$(module_box).click(function() {
$(this).parent('.module-group').children('.module-toggle').removeClass('module-toggle--on');
$(this).addClass('module-toggle--on');
if ($(this).hasClass('module-toggle--on')) {
var data_value = $(this).attr('data-id');
$(".module-toggle").removeClass('checked');
$(this).addClass('checked');
$(this).parent().children('.module-features').find('li').each(function() {
if ($(this).hasClass(data_value)) {
$(this).addClass('checked');
} else {
$(this).removeClass('checked');
}
});
};
});
});
.checked {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="module-group">
<div class="module-toggle module-toggle--on" data-id="module-1">
Module 1
</div>
<div class="module-toggle module-toggle--on" data-id="module-2">
Module 2
</div>
<div class="module-toggle module-toggle--on" data-id="module-3">
Module 3
</div>
<div class="module-features">
<ul>
<li class="module-1">Module 1 feature</li>
<li class="module-1">Module 1 feature</li>
<li class="module-1">Module 1 feature</li>
<li class="module-2">Module 2 feature</li>
<li class="module-2">Module 2 feature</li>
<li class="module-2">Module 2 feature</li>
<li class="module-3">Module 3 feature</li>
<li class="module-3">Module 3 feature</li>
<li class="module-3">Module 3 feature</li>
</ul>
</div>
</div>
另外,我增加了第三个模块,只是为了显示它的工作原理。
流线型与以下行为的代码:
.module-toggle
最后匹配.module-features li
和所有以前li
将突出显示。.module-toggle
所有li
都不再高亮度显示。$('.module-toggle').on('click', function() {
var id = $(this).data('id');
var last = $('.module-features .' + id + ':last');
if ($(this).hasClass('checked')) {
$('.module-toggle').removeClass('checked');
$('.module-features li').removeClass('checked');
} else {
$('.module-toggle').removeClass('checked');
$(this).addClass('checked');
$('.module-features li').removeClass('checked');
last.prevAll('li').add(last).addClass('checked');
}
});
li.checked {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="module-group">
<div class="module-toggle module-toggle--on" data-id="module-1">
Module 1
</div>
<div class="module-toggle module-toggle--on" data-id="module-2">
Module 2
</div>
<div class="module-toggle module-toggle--on" data-id="module-3">
Module 3
</div>
<div class="module-features">
<ul>
<li class="module-1">Module 1 feature</li>
<li class="module-1">Module 1 feature</li>
<li class="module-1">Module 1 feature</li>
<li class="module-2">Module 2 feature</li>
<li class="module-2">Module 2 feature</li>
<li class="module-2">Module 2 feature</li>
<li class="module-3">Module 3 feature</li>
<li class="module-3">Module 3 feature</li>
<li class="module-3">Module 3 feature</li>
</ul>
</div>
</div>