使用切换/滑动检查/取消选择树-一些小的编码问题 [英] Check/uncheck tree with toggle/slide - few minor coding issues
问题描述
尽管这确实使用了我昨天问的一个问题中的一些代码(动态地选中/取消选中树中的复选框)，我觉得这是一个略有不同的问题，因为我需要添加清除divs并在树中上下滑动数据.
Whilst this does use some of the code from a question I asked yesterday (Dynamically check / uncheck checkboxes in a tree), I feel that this is a slightly different question as I need to add in clearing divs and also slide data in the tree up and down.
我已经掌握了昨天学到的内容，并根据此链接添加了一个滑块- http://jsfiddle. net/3V4hg/-但现在我添加了清除divs的功能，即如果树的底部未选择任何选项，则不会一直取消对树的检查.如果查看JSFiddle，则选中A和/或B然后取消选中它，则父级和祖父母不会自动取消选中.另外，由于某些原因，我还没有弄清楚-滑块决定在单击子区域中的复选框时滑动(我也注意到，当大陆切换时，用于显示区域的切换图像会发生变化-尚未尝试解决该问题，就像添加到JSFiddle时所注意到的那样.
I've taken what I learnt yesterday and added in a slider as per this link - http://jsfiddle.net/3V4hg/ - but now I've added clearing divs the tree is not unchecking all the way to the top if the bottom of the tree has no options selected. If you look at the JSFiddle, if you check A and/or B then uncheck it, the parent and grandparent do not uncheck automatically. Also, for some reason that I haven't figured out yet - the slider decides to slide upon clicking the checkbox in the child area (I've also noticed that the toggle image for the region area to display changes when the continent one toggles - haven't tried to solve that as just noticed when adding to JSFiddle).
我还认为可能会有更好的方法来编码切换器/滑块(因为不止一种切换器都使用过，但我不确定).
I'm also thinking that there may be a better way to code the togglers/sliders (since used by more than one kind of toggle, but I'm unsure).
推荐答案
提琴: http://jsfiddle.net/3V4hg/2/
Fiddle: http://jsfiddle.net/3V4hg/2/
我已对您的代码进行了一些修改.看看小提琴和注释(在代码和答案的底部):
I have applied some modifications to your code. Have a look at the fiddle and comments (at the code, and at the bottom of the answer):
$('#delivery_zones :checkbox').change(function(){
$(this).siblings('ul').find(':checkbox').prop('checked', this.checked);
if(this.checked){
$(this).parentsUntil('#delivery_zones', 'ul').siblings(':checkbox').prop('checked', true);
} else {
$(this).parentsUntil('#delivery_zones', 'ul').each(function() {
var $this = $(this);
var childSelected = $this.find(':checkbox:checked').length;
if(!childSelected){
// Using `prevAll` and `:first` to get the closest previous checkbox
$this.prevAll(':checkbox:first').prop('checked', false);
}
});
}
});
// collapse countries and counties onload
$(".country_wrap").hide();
$(".county_wrap").hide();
// Merged two click handlers
$("#delivery_zones").click(function(event){
var root = event.target; // Get the target of the element
if($.nodeName(root, 'input')) return; // Ignore input
else if(!$.nodeName(root, 'li')) {
root = $(root).parents('li').eq(0); // Get closest <li>
}
// Define references to <img>
var img = $('.toggle img', root).eq(0);
// Define reference to one of the wrap elements *
var c_wrap = $('.country_wrap, .county_wrap', root).eq(0);
if(img.attr('src') == "http://uk.primadonna.eu/images/arrow_white_up.gif"){
img.attr('src', 'http://www.prbuzzer.com/images/downarrow-white.png');
c_wrap.slideUp("slow");
} else {
img.attr('src', 'http://uk.primadonna.eu/images/arrow_white_up.gif');
c_wrap.slideDown("slow");
}
});
* 我已将根定义为<li>元素.应该选择.count(r)y_wrap元素的第一次出现，这是使用.eq(0)实现的.
* I have defined the root to be a <li> element. The first occurrence of the .count(r)y_wrap element should be selected, which is achieved using .eq(0).
您以前的代码包含一些逻辑错误，我也已修复:$('.toggle img', this)选择每个<img>元素的一个.toggle元素，这也会导致树尾的箭头也发生切换.我使用event.target的解决方案更加整洁，可以将您的示例扩展到更深的树上.
Your previous code contained some logical errors, which I have also fixed: $('.toggle img', this) selects every <img> element which is a child of .toggle, which caused the arrows at the end of the tree to toggle too. My solution using event.target is more neater, and allows your example to be extended to even deeper trees.
这篇关于使用切换/滑动检查/取消选择树-一些小的编码问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
