我有5个项目,在它们上方有一个按钮,用于通知将显示多少个项目。 对于每个项目,我都有不同的背景图片。

问题是,当某人点击某个项目时,该项目将被删除,而另一个项目将使用jQuery appended ;当新项目被附加时,它将到达该行的末尾,使其成为第5个元素,然后使其成为第5个元素具有第5个项目的背景,但是有时第5个项目是唯一可见的,并且应该与第1个项目的背景保持一致。

这是一个JSFiddle: https ://jsfiddle.net/wmerussi/csqge7jr/

开始时有5个项目,请注意第5个项目是蓝色,现在如果您选择仅显示1个项目,然后单击该项目以将其删除,则另一个项目将是蓝色(第5个项目的颜色)。

是否可以仅将可见项目作为目标? 还是可以将可见的<li>重新排列到列表的开头?

HTML:

<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

jQuery的:

$('div').on('click', function() {
    var num = $(this).text();
    for(var i=0; i<5 ;i++) {
        if(i < num) {
            $('li').eq(i).fadeIn();
        } else {
            $('li').eq(i).fadeOut();
        }
    }
});

$(document).on('click', 'li', function() {
    $(this).fadeOut(function() {$(this).remove();});
    $(this).parent().append('<li></li>');
});

CSS:

div {
    display: inline-block;
    margin-right: 10px;
    width: 30px;
    height: 30px;
}

li:nth-child(1), .one {
    background-color: green;
}


li:nth-child(2), .two{
    background-color: orange;
}

li:nth-child(3), .three{
    background-color: red;
}

li:nth-child(4), .four{
    background-color: pink;
}

li:nth-child(5), .five{
    background-color: blue;
}

更新
如何重现问题
单击我的JSFiddle,然后选择仅显示1个项目(顶部的绿色“ 1”框)。 之后,如果您单击该可见项以将其删除(使用jQuery),您将看到附加项将变为蓝色,因为它们被附加至ul列表的末尾,从而成为第5个元素。 但这是第一个可见的项目,因此它应该是绿色的。

===============>>#1 票数:1 已采纳

我的解决方案是创建一个函数,该函数可根据项目的位置和可见性向项目添加删除类,并在每次以某种方式更新项目的事件后调用该函数。
这样,您可以使项目类管理与更新项目的代码分开

 $(function() { //the class management function function updateElemClasses() { //all color based classes the lists can have var classes = ['one', 'two', 'three', 'four', 'five']; //wait for fadeout to happen. Fadeout could take longer but this is just a proof of concept window.setTimeout(function() { $('li:visible').each(function(idx) { $(this).removeClass(classes.join(' ')).addClass(classes[idx]); }) }, 500); } $('div').on('click', function() { var num = $(this).text(); for (var i = 0; i < 5; i++) { if (i < num) { $('li').eq(i).fadeIn(); } else { $('li').eq(i).fadeOut(); } } updateElemClasses() }); $(document).on('click', 'li', function() { $(this).fadeOut(function() { $(this).remove(); }); $(this).parent().append('<li>' + $(this).text() + '</li>'); updateElemClasses() }); updateElemClasses(); }); 
 /* you do not need nth-child now */ div { display: inline-block; margin-right: 10px; width: 30px; height: 30px; } .one { background-color: green; } .two { background-color: orange; } .three { background-color: red; } .four { background-color: pink; } .five { background-color: blue; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="one">1</div> <div class="two">2</div> <div class="three">3</div> <div class="four">4</div> <div class="five">5</div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> 

===============>>#2 票数:0

visible在元素中添加或删除visible类。

然后,使用这些选择器代替:nth-child

.visible, .one {
    background-color: green;
}
.visible ~ .visible, .two {
    background-color: orange;
}
.visible ~ .visible ~ .visible, .three {
    background-color: red;
}
.visible ~ .visible ~ .visible ~ .visible, .four {
    background-color: pink;
}
.visible ~ .visible ~ .visible ~ .visible ~ .visible, .five {
    background-color: blue;
}

 $('div').on('click', function() { var num = $(this).text(); for (var i = 0; i < 5; i++) { if (i < num) { $('li').eq(i).addClass('visible').fadeIn(); } else { $('li').eq(i).removeClass('visible').fadeOut(); } } }); $('li').addClass('visible'); $(document).on('click', 'li.visible', function() { $(this) .removeClass('visible') .fadeOut(function() { $(this).remove(); }) .parent().append('<li class="visible"></li>'); }); 
 div { display: inline-block; margin-right: 10px; width: 30px; height: 30px; } .visible, .one { background-color: green; } .visible ~ .visible, .two { background-color: orange; } .visible ~ .visible ~ .visible, .three { background-color: red; } .visible ~ .visible ~ .visible ~ .visible, .four { background-color: pink; } .visible ~ .visible ~ .visible ~ .visible ~ .visible, .five { background-color: blue; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="one">1</div> <div class="two">2</div> <div class="three">3</div> <div class="four">4</div> <div class="five">5</div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> 

  ask by William translate from so

未解决问题?本站智能推荐:

4回复

jQuery / css目标nth-child类

大家好,这是我在这里发表的第一篇文章 - 我为向你提出我的愚蠢问题而道歉,但我很难自己解决这个问题。 我想在div4 div中定位没有它内容的div类'row'。 我已经尝试过使用css nth-child,但这似乎不起作用,我已经看过jQuery .find .has .filter
1回复

是$ .index()等于nth-child?

是的返回值 与CSS nth-child(index)兼容吗? 我做了一些测试,看来是这样。 有人可以确认吗?
2回复

:nth-​​child()选择器,多个nth-child

我试图在表头上获取click事件,使用jQuery很容易。 我希望点击事件在除第一个标题之外的所有标题上都是活动的。 我正在使用CSS的nth-child()属性转义第一个标头。 这就是我在做的事情 - 我没有得到结果。 有没有更好的方法我可以做到:nth-child(
3回复

javascript或jquery中的nth-child等效项

我的问题目前仅是CSS中的第n个子元素在Google Chrome上的运行速度非常慢。 因此,我想用其他选项(例如javascript / jquery或另一种语言)编写此代码,以实现完全相同的效果。 任何帮助表示赞赏!
2回复

tablerow / data上的nth-child(even)

我在使nth-child(even) css在我的表行上正常工作时有些挣扎。 我为您创建了一个小提琴,您也可以查看问题所在: http : //jsfiddle.net/jn9q8/ 我有这个过滤系统,可以在其中将发布者划分为某些国家。 如果单击顶部的“全部”,则所有发布者都将通过
2回复

为什么nth-child(1)适用于所有孩子?

基于这个非常基本的HTML结构: 我已经设置了以下jQuery: 出于某种原因,最后三行似乎没有按预期工作。 它们应该将相应的类添加到在前面的行中创建的“.outer”div的连续实例中。 我尝试过使用这种特殊语法的各种替代方法,例如...... 还有其他一些人,试图
2回复

用jQuery向nth-child添加类

我正在尝试将使用jquery的类添加到第n个子项,以便它将在IE中工作。 它似乎不起作用,我遵循了一些没有结果的示例。 我把小提琴挂了 http://jsfiddle.net/aosto/XghbU/
2回复

nth-child,为每个4的倍数元素指定样式

我有一个基于4列网格的布局,我想以类似的方式应用CSS3动画; 所以基本上,第一列中的项目的动画持续时间为1秒,第二列中的项目具有2秒的动画持续时间等。 我如何与n-child实现这一目标?
1回复

CSS nth-child没有达到预期的效果

我正在尝试动态创建一个表。 并相应地更新单元格值。 这些值是异步返回的,因此它们理论上可以引用任何列。 根据情况,列数可以随时变化,但表的此部分的行数是常量(7)。 td { border: 1px solid black; } .dummyTable td.compone
4回复

使用nth-child制作国际象棋模式

我想要在这里做一些相对简单的事情。 我需要在页面上选择每个第3和第4个元素,我怎么能用css:nth-​​child()来做? JS的答案也很受欢迎。 非常感谢。 ***编辑 抱歉,我的问题写得很糟糕。 我在下面附上了一个我需要的例子。 这是我需要的结果,