Question

我将有一个包含10个问题列表的页面。

每行都是一个问题，每个问题都有4个单选按钮（使用背景图像的水平无序列表）

当我在第一个问题中单击一个单选按钮时，我清除了“已检查”类的所有实例，然后将“已检查”类添加到我单击的类中。但是，我在问题1中单击的按钮不会干扰问题2中的按钮。所以我很难找到一种方法使这个全局函数在我点击任何一个项目时运行。

这是我的代码：

编辑：将我的代码添加到jsfiddle.net - http://jsfiddle.net/bnA4g/3/ - 更新链接

li {
    list-style-type:none;
    list-style:none;
    display:inline-block;
    white-space:nowrap;
}

.horiz {
    background:url(blankRadio.png) no-repeat center center;
    width:58px;
    height:58px;
}

.checked {
    background:url(checkedBtn.png) no-repeat center center;
    width:58px;
    height:58px;
}

$(function () {
    var row1 = $('div#row1 ul > li');
    var row2 = $('div#row2 ul > li');


        $("ul#row1Btns li").click(function () {
            $(row1).removeClass('checked');
            $(this).addClass('checked');
            console.log('checked');
        });

        $("ul#row2Btns li").click(function () {
            $(row2).removeClass('checked');
            $(this).addClass('checked');
            console.log('checked');
        });
});

Answer 1

你可以写：

$("div ul > li").click(function () {
    $(this).siblings().removeClass('checked');
    $(this).addClass('checked');
    console.log('checked');
});

这应该按照你的意图行事。

Answer 2

我会在您的行和按钮中添加一个类，而不是通过ID对它们进行寻址。然后，从所有行中删除已检查的类，然后将其添加到刚刚检查过的那个。

<ul class="buttons" id="row1btns">
    <li>...</li>
</ul>

<ul class="questions" id="row1">
    <li>...</li>
</ul>

你的剧本：

$("ul.buttons li").click(function () {
  $("ul.buttons li").removeClass('checked');
  $(this).addClass('checked');
  console.log('checked');
});

同样是样式注释，您已将row1变量指定为：

var row1 = $('div#row1 ul > li');

没有必要像你在这里那样再次使用$函数：

$(row1).removeClass('checked');

使用

就足够了

row1.removeClass('checked');

帮助优化和编写全局jQuery函数

2 个答案: