Question

我正在尝试做的是淡入一个块，在CSS上显示没有这里是我得到的：

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)更改为#tos它会正常工作但我无法使用li:eq(0)，因为这是我正在尝试做的事情。

Answer 1

这里有几个问题。首先，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，这是无效的HTML。我冒昧地将它们改为课程，这是正确的方法。 closest函数查找与选择器匹配的最近祖先，在本例中为包含元素的div。

在旁注中，由于li是块级元素，因此您可以跳过div并将所有内容直接放在li元素中，从而消除了一层HTML。

Answer 2

尝试：

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

jQuery eq显示淡入淡出块

2 个答案: