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

Question

我有一组复选框，当它们的状态为:checked时需要显示输入。

显示复选框的ID与其对应的文本输入明显不同，因此我试图使用.replace来编辑我设置的变量以针对其相应的输入。

复选框的父标识符的结构为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并用input替换icon-metro以便定位相应的文本输入字段。

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

你是soooooo关闭。

您正在使用jQuery功能字符串！那是你misstake

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

而不是做：

inputActualName.toggle('slow'); 

务必：

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