工作當中響應某個需求,切換選項卡的一個效果,根據每個選項下的內容元素的總數不同而進行不同的html變化(如果選項卡下的內容為空就等於XXX,否則就XXX)
代碼如下:
$(function(){
$(".bao").hide();
$(".bao").eq(0).show();
$(".head li").click(function(){
$(this).addClass('cur').siblings().removeClass("cur");
$(".bao").eq($(this).index()).show().siblings(".bao").hide()
var a=$(".bao").eq($(this).index()).find('li')
if(a.length<0){
alert("我小於0啊!!")
}
});
function moren(){
var moren=$(".moren").find('li')
if(moren.length==0){
alert("我是空的~沒戲")
}
}
})
先聲明 選項卡的頭部就叫頭部
選項卡的內容就叫內容啊~
想到的第一種方法(笨方法):
綁定添加了click事件。當切換頭部的時候執行.頭部根據自己的索引獲得相對應的內容,在遍歷到內容下的li元素,就獲得每個頭部相對應的內容下的總個數。
因為說,這是click事情後發現的事,但是忽略了頭部的第一個元素,我要它在浏覽器的刷新的時候就開始執行,所以我為頭部的第一個元素增加多了一個class類 在對這個class類進行判斷。最後~
就得到我想要的效果。當個數==0||!==0的時候就執行我所要的。
但是考慮到。後面可能會出現一切我所預料不到的事,我不要它在我點擊的時候在執行,我要在浏覽器刷新後加載後就幫我執行。所以小菜鳥我又苦逼的湊出一種方法
另外的一種方法 感覺這樣比較好~:
代碼如下:
$(function(){
$(".bao").hide();
$(".bao").eq(0).show();
$(".head li").click(function(){
$(this).addClass('cur').siblings().removeClass("cur");
$(".bao").eq($(this).index()).show().siblings(".bao").hide()
});
var aaa= $(".bao ul")
aaa.each(function(){
var b=$(this).children('li').length
alert(b)
if(b==0){
$(this).append("<div>我是0個之後增加上去的</div>")
}
})
})
這種方法用了$.each()
比較方便吧,目前來說得到我想要的結果。$.each()遍歷出每個內容元素,然後在獲取內容自己下面的li元素的總數 就可以判斷後得到我想要的效果