鍍金池/ 問答/HTML/ for循環(huán)生成的html代碼對應(yīng)的下標(biāo)問題

for循環(huán)生成的html代碼對應(yīng)的下標(biāo)問題

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

代碼頁面圖示如下：

clipboard.png

數(shù)據(jù)是for循環(huán)出來了，需求是為0時，book按鈕禁用。
問題是我現(xiàn)在怎么對應(yīng)找到0對應(yīng)的book按鈕。

回答
編輯回答
款爺

for循環(huán)里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>'); 
                }
                
            }
2017年9月14日 09:46
編輯回答
命于你

代碼太少有點看不懂你邏輯……
為0是指什么為零？這個能直接在for循環(huán)里判斷的話，你對應(yīng)append的book上加個class=unable然后css設(shè)置.unable=禁用不就好了0_0

難道你想另外再去寫一個循環(huán)遍歷判斷么|||

2018年6月6日 15:41
編輯回答
莫小染

在 for 循環(huán)里加個判斷就好了。

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>'); 
                    }
                    
                }
2018年1月22日 08:16
編輯回答
情未了

還有一個可能的方案，用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>');

這種方案的優(yōu)勢是減少了判斷處理，問題是會有一些css找不到對應(yīng)類定義的錯誤。

2018年3月10日 07:13
編輯回答
只愛你
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實現(xiàn)禁用效果

2018年6月26日 07:41