Question

我正在尝试做某种“树”表。

tr之间的关系是：

+----------+     +----------+     +----------+
| charges  | 1:n | services | 1:n | products | 
+----------+     +----------+     +----------+

因此，对于每个费用记录，都有N个服务，每个服务都是由产品组成的。

即。早餐费用收取一般早餐（与您的饮食相对应），这顿早餐由橙汁和一片面包制成。

我试图让第一行变成特殊颜色，当用户点击向下箭头图标时，它会显示（在示例中，只是为了可视化目的而更改颜色）与产品行的服务等。

enter image description here

当我点击红色圆圈中的箭头（充电ID 10）时，它显示（红色的颜色...¬¬）所有“儿童”服务，充电......但它也显示（颜色）红色...¬¬）充电n°12的服务....我需要知道的是当循环每次遇到带电荷的行时如何停止着色（显示）所以行中的黑色圆圈不会变为红色背景。

要做到这一点，费用，服务和产品的行有不同的类，所以jQuery可以找到它们：

 $(".listar-servicios").click(function(event){
   event.preventDefault();
   var flag = 1;
   $(this).parent().parent().css("color","green").siblings('.fila-servicio').each(function(){    
     if(!$(this).hasClass('.fila-servicio') && flag !== 1 && $(this).hasClass('.fila-consumo')){
        $(this).css('background-color', 'green');
        flag = 0;
     }else{
        $(this).css('background-color', 'red');     
        flag = 0;
     }
  });
});

您可以在此处查看一个有效的示例和我的代码：JSBIN

很抱歉这个问题很长。

Answer 1

这是解决方案

        $(".listar-servicios").click(function(event){
           event.preventDefault();
           $(this).parent().parent().css("color","green").siblings('.fila-servicio,.fila-consumo').each(function(){
              if($(this).hasClass('fila-servicio')){
                  $(this).css('background-color', 'red');   
              }else if($(this).hasClass('fila-consumo')){
                return false;
              }          
          });
       });

您的代码中几乎没有问题

当您通过hasClass方法检查特定类时，您不必使用点（。），因为它是Jquery选择器。
在兄弟姐妹中你需要选择带有'fila-consumo'类的兄弟姐妹，然后你才能在每个循环中找到那个元素。

我已经删除了我认为没用的标志，因为打破了你需要使用return false的循环。

更新 -

您可以使用另一种方法'nextAll'代替兄弟姐妹来完美地运作它。当我测试这段代码时，当你点击箭头按钮时，我发现它不适用于充电ID 12。因为第一个兄弟姐妹本身是当前的行，它有类fila-consumo。所以我使用nextAll和选择器'tr'具有必需的类。下面的代码完美无缺。

  $(".listar-servicios").click(function(event){
      event.preventDefault();
      $(this).parent().parent().css("color","green").nextAll('tr.fila-servicio,.fila-consumo').each(function(){
        if($(this).hasClass('fila-servicio')){
            $(this).css('background-color', 'red');   
        }else if($(this).hasClass('fila-consumo')){
            return false;
        }

      });
    });

Answer 2

我能想到的最简单方法是使用HTML5的数据对象。

由于您无论如何都要循环遍历每一行，因此添加一个数据对象（data-“variable”=“##”）并对其进行检查。

<tr class="fila-servicio" data-charge="10">...</tr>

使用jQuery's "data" method，您可以使用以下方法轻松提取和检查数据值是否与当前ID匹配：

$(this).closest("fila-consumo").css("color","green").siblings('.fila-servicio').each(function(){
    // Get the id of the row (preferably store this as an id or data object as well)
    var rowId=$(this).closest('td.oculto').text();
    if(!$(this).hasClass('.fila-servicio') && flag !== 1 && $(this).hasClass('.fila-consumo') && $(this).data("charge")!=rowId){
        $(this).css('background-color', 'green');
        flag = 0;
    }else{
        $(this).css('background-color', 'red');     
        flag = 0;
    }
 });

注意：由于这不是我的头脑，我不确定我是否正确，但我认为它应该有效。

jQuery更改tr CSS直到tr类不同

2 个答案: