jQuery的EQ，以塊顯示褪色

我試圖做的是在一個塊中的CSS是顯示器沒有在這裏消失是我得到：jQuery的EQ，以塊顯示褪色

CSS：

.white_content { 
    display: none; 
    position: relative;; 
    width: 5%; 
    height: 5%; 
    padding: 24px; 
    border: 16px solid orange; 
    background-color: some; 
    z-index:1; 
}

jQuery的

$(function(){ 
    $("#act1").click(function() { 
     $('li:eq(0)').fadeIn(400); 
    }); 
    $("#act2").click(function() { 
     $('li:eq(1)').fadeIn(400); 
    }); 
});

一個在HTML：

<div id="act1">first click</div> 
<div id="act2">second click</div> 

<ul> 
    <li><div id="tos" class="white_content"> 
    some text... 
    </div></li> 

    <li><div id="tos" class="white_content"> 
    other some text 
    </div></li> 
</ul>

如果我將jQuery li:eq(0)更改爲，它將正常工作，但我無法使用它與li:eq(0)一起工作，因爲這是我正在嘗試執行的操作。

來源

2010-11-16 donvitto

這裏有幾個問題。首先，id必須是唯一的 - 它們不能重複，因爲你已經在這裏的代碼中做過。其次，display: none屬性設置爲div.white_content，而不是li，因此您的選擇器應爲li:eq(n) div.white_content。

即使那麼這段代碼應該很容易可擦寫的東西整潔，像這樣：

$('div[id^=act]').click(function(){ 
    var n = parseInt(this.id.substring(3), 10); 
    $('li').eq(n-1).find('.white_content').fadeIn(400); 
});

鑑於你的HTML，我想這是你所需要的：

// For the two buttons 
$('div[id^=act]').click(function(){ 
    var n = parseInt(this.id.substring(3), 10); 
    $('li').eq(n-1).find('.white_content').fadeToggle(400); 
}); 

// For the close button 
$('.close').click(function(){ 
    $(this).closest('.tos').fadeOut(400); 
});

你」重新使用重複的id s，這是無效的HTML。我冒昧將它們改爲課堂，這是做到這一點的正確方法。 closest函數查找與選擇器匹配的最近的祖先，在此例中爲包含元素的div。

請注意，由於li是塊級元素，因此可以跳過div，並將所有內容直接放入li元素中，從而消除了一層HTML。

來源

2010-11-16 05:32:52

@Yi蔣我喜歡整潔的版本之一笏我一直在尋找，但我忘了什麼事我怎麼能關閉塊，我有一個ID的圖像上關閉對話框。點擊塊fadesOut，我怎麼能實現這個更整潔的代碼...？ – donvitto 2010-11-16 05:48:47

@don您可以使用'.toggle'來代替'.click'來做到這一點，或者如果您使用的是1.4.4版本，那麼'fadeToggle'函數也會使用 – 2010-11-16 05:53:23

@Yi Jiang我現在試試但它沒有工作......你怎麼做到這一點......這就是我所做的$（function（）{{0} {0} {0}（「＃close」）。click（function（）{ $（this） .fadeOut（400）; }）; – donvitto 2010-11-16 06:08:13

嘗試：

$(function(){ 
    $("#act1").click(function() { 
     $('li:eq(0) div.white_content').fadeIn(400); 
    }); 
    $("#act2").click(function() { 
     $('li:eq(1) div.white_content').fadeIn(400); 
    }); 
});

來源

2010-11-16 05:33:32

jQuery的EQ，以塊顯示褪色

回答

相關問題