Question

这是我上一个问题的第2部分（被建议为这个问题开始一个新问题）。
仅供参考，这是我之前的帖子：Dots for Children in div. A jQuery headache
我现在的问题是：
为了造型目的，如何为“imgdots”div添加“有效”类/ ID？
例如：< / strong>
说我在图像4上然后我希望第4个“imgdots”div成为另一种颜色。

再次，任何帮助都会非常感激！

编辑
我已经建立了一个包含我迄今所拥有的小提琴。初始图像滑块来自我所遵循的教程，并且从那里将它们拼凑在一起。
这是链接：jsfiddle.net/Reinhardt/cgt5M/8 /

Answer 1

你见过第n个孩子的css吗？

http://www.w3schools.com/cssref/sel_nth-child.asp

#showContainer:nth-child(4)
{
background:#ff0000;
}

Answer 2

尝试

/* The jQuery plugin */
(function ($) {
    $.fn.simpleShow = function (settings) {
        var config = {
            'tranTimer': 5000,
            'tranSpeed': 'normal'
        };
        if (settings) $.extend(config, settings);
        this.each(function () {
            var $wrapper = $(this),
                $ct = $wrapper.find('.showContainer'),
                $views = $ct.children();
            var viewCount = $views.length;

            var $imgdotholder = $('<div class="imgdotholder"></div>').appendTo('.wrapper');
            for (var i = 0; i < viewCount; i++) {
                $('<div class="imgdots"></div>').appendTo($imgdotholder);
            }
            var $imgdots = $imgdotholder.children();

            var timer, current = 0;

            function loop() {
                timer = setInterval(next, config.tranTimer);
            }

            function next(idx) {
                $views.eq(current).hide();

                current = idx == undefined ? current + 1 : idx;
                if (isNaN(current) || current < 0 || current >= viewCount) {
                    current = 0;
                }

                $views.eq(current).fadeIn(config.tranSpeed);
                $imgdots.removeClass('current').eq(current).addClass('current');
            }

            $imgdots.click(function(){
                clearInterval(timer);
                next($(this).index());
            })

            $wrapper.find('.btn_nxt').click(function(){
                clearInterval(timer);
                next();
            });
            $ct.hover(function(){
                clearInterval(timer);
            }, loop);

            $views.slice(1).hide();
            $imgdots.eq(0).addClass('current');
            loop();
        });
        return this;
    };
})(jQuery);

/* Calling The jQuery plugin */
$(document).ready(function () {
    /**/
    $(".wrapper").simpleShow({
        'tranTimer': 3000,
        'tranSpeed': 800
    });
});

演示：Fiddle

div中的儿童点。一个jQuery头痛 - 第2部分

2 个答案: