单击项目将使用jquery突出显示相关数据
单击项目将使用jquery突出显示相关数据
提问于 2017-09-08 17:30:41
单击列表或表格中的项目时，我想突出显示相关数据。作为我尝试实现的一个示例，我将使用下面的代码。这是一个父母和孩子的名单。在本例中，我使用id-属性来标识person，使用data-*属性来标识当前person的父母或孩子。
<ul>
<li id="Bill" data-children="John Anne">Bill, father</li>
<li id="John" data-parents="Bill">John, son</li>
<li id="Anne" data-parents="Bill">Anne, daughter</li>
<li id="Jane" data-children="Lisa">Jane, mother</li>
<li id="Jack" data-children="Lisa">Jack, father</li>
<li id="Lisa" data-parents="Jane Jack">Lisa, daughter</li>
</ul>当点击任何人时，相关人员(父母或孩子)应突出显示。如果我单击一个父项，子项将突出显示，反之亦然。所选人员也将突出显示。下面是两种情况的截图：
我使用以下CSS类来突出显示数据：
.bold { font-weight: bold; }
.selected { color: #F88; }我已经编写了以下jQuery代码，但它是非常静态的，只有在单击比尔或丽莎时才能工作：
$("#Bill").click(function() {
$("li").removeClass("selected bold");
$(this).addClass("selected bold");
$("#John,#Anne").addClass("bold");
});
$("#Lisa").click(function() {
$("li").removeClass("selected bold");
$(this).addClass("selected bold");
$("#Jane,#Jack").addClass("bold");
})我真的希望jQuery代码能够动态地突出显示相关的父母/孩子。概念上是这样的：
$("<any person>").click(function() {
$("li").removeClass("selected bold");
$(this).addClass("selected bold");
if (<selected person is a parent>) {
$(<all persons that has data-parents==this.id>).addClass("bold");
}
etc...
})这个是可能的吗？您可以随意重新排列HTML。也许我可以使用class而不是data-*属性？
回答 4
Stack Overflow用户
发布于 2017-09-08 17:36:07
要泛化这一点，您可以首先将事件处理程序添加到ul中的所有li元素。
然后，您可以通过将data-children或data-parents拆分为一个数组，循环遍历该数组，并将bold类添加到与该id匹配的元素中，从而获得相关对象的id属性，如下所示：
$("ul li").click(function() {
$("li").removeClass("selected bold");
$(this).addClass("selected bold")
var relatives = $(this).data('parents') || $(this).data('children') || '';
relatives.split(' ').forEach(id => $('#' + id).addClass('bold'));
});.bold { font-weight: bold; }
.selected { color: #F88; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="Bill" data-children="John Anne">Bill, father</li>
<li id="John" data-parents="Bill">John, son</li>
<li id="Anne" data-parents="Bill">Anne, daughter</li>
<li id="Jane" data-children="Lisa">Jane, mother</li>
<li id="Jack" data-children="Lisa">Jack, father</li>
<li id="Lisa" data-parents="Jane Jack">Lisa, daughter</li>
</ul>
需要注意的一件事是，此逻辑假设li有data-children或data-parents，但不是两者都有，并且只有一个级别的li元素。如果其中任何一个都不是真的，那么你需要稍微修改一下逻辑。
Stack Overflow用户
发布于 2017-09-08 17:43:32
这是您的动态解决方案：
$("li").click(function() {
$("li").removeClass("selected bold");
var id = $(this).attr('id');
$(document).find('[data-parents="'+id+'"]').addClass("bold");
$(document).find('[data-children="'+id+'"]').addClass("bold");
$(this).addClass("selected");
});Stack Overflow用户
发布于 2017-09-08 17:58:09
尝尝这个。在下面的小提琴中演示...
https://jsfiddle.net/kf8mfa5y/2/
我在html中添加了一个公共类，将click事件作为目标。
HTML
<ul>
<li id="Bill" class="people" data-children="John Anne">Bill, father</li>
<li id="John" class="people" data-parents="Bill">John, son</li>
<li id="Anne" class="people" data-parents="Bill">Anne, daughter</li>
<li id="Jane" class="people" data-children="Lisa">Jane, mother</li>
<li id="Jack" class="people" data-children="Lisa">Jack, father</li>
<li id="Lisa" class="people" data-parents="Jane Jack">Lisa, daughter</li>
</ul>JQuery
$(function() {
$(".people").click(function() {
$(".people").removeClass("selected bold");
$("#" + this.id).addClass("selected bold");
var parents = $("#" + this.id).attr('data-parents');
var children = $("#" + this.id).attr('data-children');
if (!(parents == null)) {
var parentarr = parents.split(" ");
$.each(parentarr, function(key, value) {
$("#" + value).addClass("bold");
});
};
if (!(children == null)) {
var childrenarr = children.split(" ");
$.each(childrenarr, function(key, value) {
$("#" + value).addClass("bold");
});
};
});
});CSS
.bold { font-weight: bold; }
.selected { color: #F88; }页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46113183
复制相关文章
相似问题
腾讯云开发者
