0

我有一组复选框，当它们的状态为: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"]asthis然后找到它的父元素 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 获得更高级的知识。

4

1 回答 1

2

你太亲近了。

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

检查这个：http: //jsfiddle.net/eFtWh/1/

而不是这样做：

inputActualName.toggle('slow');

做 ：

$(inputActualName).toggle('slow');
于 2013-05-27T18:36:54.860 回答