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

Answer 2

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

Answer 3

Fiddle

替换此

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

通过

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

具有变量的复杂Jquery选择器

3 个答案: