for循环生成的html代码对应的下标问题

Question

for (var j = 0; j < result[i].SeatInfos.length; j++) { 
                    $(".lv-ticketNum" + i).append('<p class="surplus surplus' + j + '">' + result[i].SeatInfos[j].SeatNum + '&nbsp;</p>');
                    $(".lv-ticketBtn" + i).append('<a class="btn g-btn g-btn' + j + '"  data-key="' + j + '"  href="javascript:;"><span>Book</span></a>'); 
                }
                
                

代码页面图示如下：

数据是for循环出来了，需求是为0时，book按钮禁用。
问题是我现在怎么对应找到0对应的book按钮。

Answer 1

for (var j = 0; j < result[i].SeatInfos.length; j++) { 
                    $(".lv-ticketNum" + i).append('<p class="surplus surplus' + j + '">' + result[i].SeatInfos[j].SeatNum + '&nbsp;</p>');
                    if（result[i].SeatInfos[j].SeatNum == 0）{
                    $(".lv-ticketBtn" + i).append('<a class="btn g-btn g-btn' + j + '"  data-key="' + j + '"  href="javascript:;" class="disabled"><span>Book</span></a>'); 
                    }else{
                    $(".lv-ticketBtn" + i).append('<a class="btn g-btn g-btn' + j + '"  data-key="' + j + '"  href="javascript:;"><span>Book</span></a>'); 
                    }
                    
                }
                
         <style>
        a.disabled {
            pointer-events: none;
            filter: alpha(opacity=50); /*IE滤镜，透明度50%*/
            -moz-opacity: 0.5; /*Firefox私有，透明度50%*/
            opacity: 0.5; /*其他，透明度50%*/
        }
    </style>
           
                

用css实现禁用效果

Answer 2

代码太少有点看不懂你逻辑……
为0是指什么为零？这个能直接在for循环里判断的话，你对应append的book上加个class=unable然后css设置.unable=禁用不就好了0_0

难道你想另外再去写一个循环遍历判断么|||

Answer 3

在 for 循环里加个判断就好了。

for (var j = 0; j < result[i].SeatInfos.length; j++) { 
                    $(".lv-ticketNum" + i).append('<p class="surplus surplus' + j + '">' + result[i].SeatInfos[j].SeatNum + '&nbsp;</p>');
                    if(j !== 0) {
                        $(".lv-ticketBtn" + i).append('<a class="btn g-btn g-btn' + j + '"  data-key="' + j + '"  href="javascript:;"><span>Book</span></a>'); 
                    }else {
                        $(".lv-ticketBtn" + i).append('<a class="btn g-btn g-btn' + j + '"  data-key="' + j + '"  href="javascript:;"><span class="disabled">Book</span></a>'); 
                    }
                    
                }

Answer 4

for循环里append Book的时候判断result[i].SeatInfos[j].SeatNum是否为0

for (var j = 0; j < result[i].SeatInfos.length; j++) { 
                $(".lv-ticketNum" + i).append('<p class="surplus surplus' + j + '">' + result[i].SeatInfos[j].SeatNum + '&nbsp;</p>');
                if(result[i].SeatInfos[j].SeatNum !== 0) {
                    $(".lv-ticketBtn" + i).append('<a class="btn g-btn g-btn' + j + '"  data-key="' + j + '"  href="javascript:;"><span>Book</span></a>'); 
                }else {
                    $(".lv-ticketBtn" + i).append('<a class="btn g-btn g-btn disabled' + j + '"  data-key="' + j + '"  href="javascript:;"><span>Book</span></a>'); 
                }
                
            }

Answer 5

还有一个可能的方案，用css处理，新定义一个类，比如

a_Xdis0 {
   你禁用的效果
}

然后把

 $(".lv-ticketBtn" + i).append('<a class="btn g-btn g-btn' + j + '"  data-key="' + j + '"  href="javascript:;"><span>Book</span></a>'); 

改为

 $(".lv-ticketBtn" + i).append('<a class="btn g-btn g-btn' + j + 'a_Xdis'+result[i].SeatInfos[j].SeatNum"  data-key="' + j + '"  href="javascript:;"><span>Book</span></a>'); 

这种方案的优势是减少了判断处理，问题是会有一些css找不到对应类定义的错误。