我试图弄清楚如何最好地允许两个不同标准组之间的多选。现在,在我的示例中选择Yellow和Small将返回所有Yellow和所有Small元素。我希望能回到黄与小的交汇点。
.selectable({selected: function () {
$("#table-content tr").hide();
if ($("#Red").is(".ui-selected")) {
$(".color:contains('Red')").showParent();
}
...
if ($("#Small").is(".ui-selected")) {
$(".size:contains('Small')").showParent();
}
答案 0 :(得分:1)
<强> JS: - 强>
function toggleSelected() {
$("#table-content tr").hide();
var colorSelected = $(".selector .ui-selected").length;
var sizeSelected = $(".selector2 .ui-selected").length;
if ((colorSelected > 0 && sizeSelected == 0) || (colorSelected == 0 && sizeSelected > 0)) {
$(".selector").find(".ui-selected").each(function () {
$(".color:contains(" + $(this).text() + ")").showParent();
});
$(".selector2").find(".ui-selected").each(function () {
$(".size:contains(" + $(this).text() + ")").showParent();
});
} else {
$(".selector").find(".ui-selected").each(function () {
var selectedColor = $(".color:contains(" + $(this).text() + ")");
$(".selector2").find(".ui-selected").each(function () {
selectedColor.parent().find(".size:contains(" + $(this).text() + ")").showParent();
});
});
}
if ($(".ui-selected").length == 0) $("#table-content").find("tr").show();
}
$(document).ready(function () {
$.fn.showParent = function () {
$(this).parent().show();
};
$(".selector, .selector2").bind("mousedown", function (e) {
e.metaKey = true;
}).selectable({
selected: toggleSelected,
unselected: toggleSelected
});
});
答案 1 :(得分:1)
......也许是这个?
.selectable({ selected: function () {
$("#table-content tr").show();
if (!$("#Red").is(".ui-selected")) {
$(".color:contains('Red')").hideParent();
}
答案 2 :(得分:0)
添加.css使其丰富多彩,大小如下所示: http://jsfiddle.net/kjelenak/RKxj7/55/
function toggleSelected() {
$("#table-content tr").hide();
var colorSelected = $(".selector .ui-selected").length;
var sizeSelected = $(".selector2 .ui-selected").length;
if ((colorSelected > 0 && sizeSelected == 0) || (colorSelected == 0 && sizeSelected > 0)) {
$(".selector").find(".ui-selected").each(function () {
var colour = $(this).text();
$(".color:contains(" + $(this).text() + ")").css("color", colour).showParent();
});
$(".selector2").find(".ui-selected").each(function () {
$(".size:contains(" + $(this).text() + ")").showParent();
});
} else {
$(".selector").find(".ui-selected").each(function () {
var selectedColor = $(".color:contains(" + $(this).text() + ")");
$(".selector2").find(".ui-selected").each(function () {
var size = $(this).text(); selectedColor.parent().find(".size:contains(" + $(this).text() + ")").css("font-size", size).showParent();
});
});
}
if ($(".ui-selected").length == 0) $("#table-content").find("tr").show();
}
$(document).ready(function () {
$.fn.showParent = function () {
$(this).parent().show();
};
$(".selector, .selector2").bind("mousedown", function (e) {
e.metaKey = true;
}).selectable({
selected: toggleSelected,
unselected: toggleSelected
});
});