jQuery 更改 tr CSS 直到 tr 类不同

Question

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

tr之间的关系如下：

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

所以每条收费记录都有N项服务，每项服务都是由产品构成的。

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

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

当我单击红色圆圈中的箭头（收费 id 10）时，它会显示（红色... ¬¬）所有“儿童”服务，收费...但它也显示（颜色红色...黑色圆圈不会变为红色背景。

为此，费用、服务和产品的行具有不同的类，因此 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 方法检查特定类时，您不必使用 dot(.)，因为它是 Jquery 选择器。
• 在兄弟姐妹中，您需要选择类为“fila-consumo”的兄弟姐妹，然后只有您会在每个循环中找到该元素。

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

---

更新-

您可以使用另一种方法“nextAll”代替兄弟姐妹来完美地工作。 当我测试此代码时，当您单击箭头按钮时，我发现它不适用于 Charge 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 的数据对象。

由于无论如何您都在遍历每一行，因此添加一个数据对象（数据-“变量”=“##”）并检查它。

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

注意：由于这不是我的想法，我不确定我是否一切都正确，但我认为它应该可以工作。