0

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

tr 之间的关系是：

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

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

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

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

在此处输入图像描述

当我单击红色圆圈中的箭头（收费 id 10）时，它会显示（红色... ¬¬）所有“儿童”服务，收费...但它也显示（红色。 .. ¬¬) 收费 n° 12 的服务.... 我只需要知道当每个循环遇到收费 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

对不起，很长的问题。

4

2 回答 2

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

      });
    });
于 2012-07-06T05:34:37.247 回答
0

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

由于无论如何您都在遍历每一行，因此添加一个数据对象 (data-"variable"="##") 并对其进行检查。

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

使用jQuery 的“数据”方法，您可以轻松地提取并检查数据值是否与当前 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;
    }
 });

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

于 2012-07-06T05:21:03.260 回答