javascript - 带有变量的复杂 Jquery 选择器

Question

我正在构建一个乐透网站的演示，其中向用户展示了一个充满球的部分和第二个将填满他/她的选择的部分。

我想做的是创建一个 jQuery 函数，该函数将在用户单击球时运行，该函数必须检索被单击的球的编号以及球的颜色(背景图像)然后将数字和背景图像设置为下一个可用球。

这是一个 jsFiddle:http://jsfiddle.net/8kq5p6gb/1/

这是我的 jQuery 函数，它存储单击球的编号和背景，然后尝试找到下一个可用的打开球并将该文本和背景应用于它，但它目前不起作用。
当我点击一个球我得到这个错误:

Uncaught Error: Syntax error, unrecognized expression: [object Object] a:nth-child(1)

对于代码:

$(document).ready(function () {

    var line_counter = 1;
    var number_counter = 1;

    $('.draw-selection-wrapper.choice .draw-number').click(function (e) {
        event.preventDefault(e);

        var number = $(this).text(); ;
        var background = $(this).css('background-image');

        var row = $('.draw-selection-wrapper.selections div:nth-child(' + line_counter + ')');

        var link = $(row + ' a:nth-child(' + number_counter + ')');

        link.text(number);
        link.css('background-image', background);

        number_counter = number_counter + 1;
        if (number_counter == 8) {
            line_counter = line_counter + 1;
            number_counter = 1;
        }

    });


});

这是我的 HTML:

<div class="draw-numbers-outer-wrapper">
                        <div class="draw-selection-wrapper choice">
                            <div class="draw-number-row one">
                                <a href="" class="draw-number">1</a>
                                <a href="" class="draw-number">2</a>
                                <a href="" class="draw-number">3</a>
                                <a href="" class="draw-number">4</a>
                                <a href="" class="draw-number">5</a>
                                <a href="" class="draw-number">6</a>
                                <a href="" class="draw-number">7</a>
                            </div>
                            <div class="draw-number-row two">
                                <a href="" class="draw-number">8</a>
                                <a href="" class="draw-number">9</a>
                                <a href="" class="draw-number">10</a>
                                <a href="" class="draw-number">11</a>
                                <a href="" class="draw-number">12</a>
                                <a href="" class="draw-number">13</a>
                                <a href="" class="draw-number">14</a>
                            </div>
                        </div>
                        <div class="draw-selection-wrapper selections">
                            <div class="draw-number-row">
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                            </div>
                            <div class="draw-number-row">
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                                <a href="" class="draw-number"></a>
                            </div>
                        </div>
                    </div>

还有我的 CSS:

.draw-selection-wrapper {
    width: 50%;
    float: left;
}
.draw-number-row {
    height: 36px;
    border: 1px solid #C6C4C5;
    padding-left: 10px;
}
.line-number {
    float: left;
    height: 100%;
    width: 12px;
}
.draw-number {
    width: 9%;
    float: left;
    height: 100%;
    line-height: 36px;
    margin: 0px 2.5% 0px 2.5%;
    color: #000;
    text-align: center;
    background-color: green;
}
.draw-selection-wrapper.selections .draw-number {
    margin: 0px 2% 0px 2%;
}
.draw-number-row.one .draw-number {
    background-color: red;
}
.draw-number-row.two .draw-number {
    background-color: teal;
}

Answer 1

row 是一个 jQuery 对象，而不是字符串，因此当您尝试将对象连接成字符串时，您最终会得到 [Object, object]。

您可以改用上下文选择器

var row = $('.draw-selection-wrapper.selections div:nth-child(' + line_counter + ')');

var link = $('a:nth-child(' + number_counter + ')', row);

FIDDLE