Question

我想在点击列表或表格中的项目时突出显示相关数据。作为我尝试实现的一个例子，我将使用下面的代码。这是父母和孩子的名单。在这种情况下，我使用id-attribute来标识person，使用data- *属性来标识当前人的父母或子女。

  <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或Lisa时才有效：

$("#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- *属性？...

Answer 1

要对此进行通用，您可以先将事件处理程序添加到li中的所有ul元素。

然后，您可以通过将id或data-children拆分为数组，循环遍历数据并将data-parents类添加到元素中来获取亲属的bold属性哪个匹配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元素。如果其中任何一个都不正确，那么你需要稍微修改逻辑。

Answer 2

这是您的动态解决方案：

{{1}}

Answer 3

试试这个。在下面的小提琴演示...

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; }

Answer 4

 $("ul li").each(function(){
  $(this).on("click", function(){
    if(typeof $(this).data('children') !="undefined"){
      $("li").removeClass("selected bold");
      $(this).addClass("selected bold");
      var childItems = $(this).data('children').split(' ');
      $(childItems).each(function(){    
        $("#"+this).addClass("bold");
      });
    }
     if(typeof $(this).data('parents') !="undefined"){
        $("li").removeClass("selected bold");
        $(this).addClass("selected bold");
        var parentItems = $(this).data('parents').split(' ');
        $(parentItems).each(function(){    
          $("#"+this).addClass("bold");
        });
    }
    });
});

单击某个项目将使用jquery

4 个答案: