在JQuery中，作为each()方法的一部分，我如何避免两个$(this)选择器相互冲突

Question

所有人。

我是JQuery的新手，我正在尝试做以下事情：我有select和checkbox元素，我希望每次加载或刷新文档时都会发生某些更改。我的意思是，选择的背景应该不同，这取决于当前是否选择了空选项（或提示）。此外，根据前者，还应启用或禁用（附带的）复选框（选择空选项=>禁用复选框或相反）。

现在，我不会手动输入任何id（从选择框或复选框）。相反，我想通过在正确的选择器上使用each方法来普通地获得它们。这就是问题产生的地方。

所以，假设我们有这个：

<select id="select_01"> 
<option value="">Whatever as prompt...</option> 
<option value="first">First option</option>
</select>
<input id="check_box_01" type="checkbox" />

<select id="select_02"> 
<option value="first" selected="selected">First option</option> 
<option value="">Whatever as prompt...</option> 
</select>
<input id="check_box_02" type="checkbox" />

在一个脚本中，我写下：

    $(document).ready(function() {
    $("select,:checkbox").each(function() {
        mySelectId = $("#" + $(this).attr("id"));
        myCheckboxId = $("#" + $(this).attr("id"));
        if (mySelectId.attr("value") === "") {
            mySelectId.css({
                "background": "grey"
            });
            myCheckboxId.attr("disabled", "disabled");
        }
    });
});

正如你所看到的，问题是$（"select，：checkbox"）。每个方法都无法辨别哪个$（this）代表什么（好吧，那个和我自己明显缺乏解决这个问题的知识）。

如果我忽略了其中一个选择器，那么一切都很好，但（显然）它只影响选择或复选框，而不会同时影响两者。像这样的东西是有效的（背景应该改变，但复选框不受影响）：

$(document).ready(function() {
    $("select").each(function() {
        mySelectId = $("#" + $(this).attr("id"));
        if (mySelectId.attr("value") === "") {
            mySelectId.css({
                "background": "grey"
            });
        }
    });
});

？我可以在方法的范围内使mySelectId和myCheckboxId成为两个不同的、易于识别的变量吗？任何帮助都将不胜感激。提前感谢！

卡洛斯·帕迪拉。

PD：（我想在上面说"嗨，大家好"，但编辑一直在剪辑整个问候语——不知道为什么）

Answer 1

在循环each（）函数中，您不会将元素成对获取。

你一个接一个地得到它们。

我会分两个步骤（两个循环）来完成，一个用于选择，一个用作复选框。

Answer 2

if ( $(this).is("select") ) {
  mySelectId = $("#" + $(this).attr("id"));
}else if (( $(this).is(":checkbox") ) {
  myCheckboxId = $("#" + $(this).attr("id"));
}

Answer 3

好吧，多亏了你们两个，我终于成功地让它工作了：

$(document).ready(function() {
    $("select, :checkbox").each(function() {
        if ($(this).is("select")) {
            mySelectId = $("#" + $(this).attr("id"));
            if (mySelectId.attr("value") === "") {
                mySelectId.css({
                    "background": "grey"
                });
            }
        } else if ($(this).is(":checkbox")) {
            myCheckboxId = $("#" + $(this).attr("id"));
            if (mySelectId.attr("value") === "") {
                myCheckboxId.attr("disabled", "disabled");
            }
        }
    });
});

我唯一不满意的是必须重复if (mySelectId.attr("value") === "") {（如果可能的话，我会尝试应用Rails的DRY哲学），但我相信我会找到一个解决办法。

我发现is（）方法（我以前不太熟悉）在这种情况下有很大帮助。

请随意修改：http://jsfiddle.net/CarlosPF/DsHUp/

非常感谢你们两个！你的帮助是非常宝贵的。

卡洛斯·帕迪拉。