Question

我有一系列复选框，需要在状态为:checked时显示输入。

复选框的ID明显不同于相应的文本输入，因此我尝试使用.replace编辑我设置的变量，以便定位相应的输入。

复选框父ID的结构为icon-metro-NAME，文本输入为'input-NAME`。

以下是我的代码部分，然后是整个代码：

jQuery('input[type="checkbox"]').each(function () {

    var checkbox = jQuery(this);
    var checkboxParentID = jQuery(this).parent().attr('id');
    var inputName = checkboxParentClass.replace(icon-metro, 'input');

尝试将input[type="checkbox"]设置为this，然后找到它的父元素ID并将其设置为checkboxParentID。然后，我使用checkboxParentID并将icon-metro替换为input，以便定位相应的文本输入字段。

checkbox.change(function () {
        if (jQuery(this).is(":checked")) {
            jQuery(this).parent('.metro-icon').addClass('active');
            jQuery(inputName).toggle('slow');
        } else {
            jQuery(this).parent('.metro-icon').removeClass('active');
            jQuery(inputName).toggle('slow');
        }
    });
});

然后我检测复选框的:checked状态，如果选中它，我将active类添加到它的父.metro-icon元素中。之后，我从变量中找到:checked元素对应的文本输入inputName并切换其可见性。否则，如果未选中，则从其父级中删除active类，并切换/隐藏相应的文本输入。

完整代码：

jQuery('input[type="checkbox"]').each(function () {

    var checkbox = jQuery(this);
    var checkboxParentID = jQuery(this).parent().attr('id');
    var inputName = checkboxParentClass.replace(icon-metro, 'input');

    checkbox.change(function () {
        if (jQuery(this).is(":checked")) {
            jQuery(this).parent('.metro-icon').addClass('active');
            jQuery(inputName).toggle('slow');
        } else {
            jQuery(this).parent('.metro-icon').removeClass('active');
            jQuery(inputName).toggle('slow');
        }
    });
});

我意识到这可能是一团糟。我正在挑战自己，以获得更高级的jQuery。

Answer 1

你真是太近了。

您正在字符串上使用jQuery函数！这是你的错误

请检查：http://jsfiddle.net/eFtWh/1/

而不是：

inputActualName.toggle('slow');

做：

$(inputActualName).toggle('slow');

在复选框更改时切换相应的文本输入

1 个答案: