jQuery for元素ID的循环

Question

我总共有六行字段，包含从1到3的列，例如#prefix_row1_content_col1有3列

row1_col1_, row1_col2_, row1_colr3_，但其他可以有2或1或3个

现在，我正试图根据下拉选择值隐藏表单字段，如果我手动添加所有ID，效果很好，但是否存在（不添加类）不必为每一行编写代码的情况？

例如，在行和列中使用嵌套For循环？这是我的代码

$('#' + prefix + 'row1_content_col1').change(function() {
    $('#' + prefix + 'row1_col1_youtube, #' + prefix + 'row1_col1_rss_feed_url, #' + prefix + 'row1_col1_custom_php, #' + prefix + 'row1_col1_advert').fadeOut();
    $('#' + prefix + 'row1_col1_' + $(this).val()).fadeIn();
    $('#' + prefix + 'row1_col1_' + $(this).val() + '_url').fadeIn();

}).change();

我尝试过循环，但没有成功，可能是我做错了什么，因为我不太熟悉jQuery

for(c=1; c<=6; c++){
    $('#' + prefix + 'row1_content_col'+c).change(function() {
        $('#' + prefix + 'row1_col'+c+'_youtube, #' + prefix + 'row1_col'+c+'_rss_feed_url, #' + prefix + 'row1_col'+c+'_custom_php, #' + prefix + 'row1_col'+c+'_advert').fadeOut();
        $('#' + prefix + 'row1_col'+c+'_' + $(this).val()).fadeIn();
        $('#' + prefix + 'row1_col'+c+'_' + $(this).val() + '_url').fadeIn();

    }).change();
}

HTML标记

<select id="fp_row1_content_col1" name="fp_row1_content_col1">
    <option value="youtube">youtube</option>
    <option value="rss_feed">rss_feed</option>
    <option value="custom_php">custom_php</option>
    <option value="advert">advert</option>
</select>
<div id="fp_row1_col1_heading">
    <input type="text" value="" name="fp_row1_col1_youtube">
</div>
<div id="fp_row1_col1_rss_feed_url">
    <input type="text" class="qa-form-tall-text" value="" name="fp_row1_col1_rss_feed_url">
</div>
..........
<select id="fp_row1_content_col3" name="fp_row1_content_col3">
    <option value="youtube">youtube</option>
    <option value="rss_feed">rss_feed</option>
    <option value="custom_php">custom_php</option>
    <option value="advert">advert</option>
</select>
<div id="fp_row1_col3_heading">
    <input type="text" value="Youtube Video" name="fp_row1_col3_heading">
</div>
<div id="fp_row1_col3_rss_feed_url">
    <input type="text" class="qa-form-tall-text" value="" name="fp_row1_col3_rss_feed_url">
</div>

Answer 1

由于要在for循环中创建新函数，因此变量c随后将存在于这些创建的函数中，但在所有这些函数中都具有值7。更好的方法是稍微修改控件的id：

// remove the content part to make it easier to find the other elements
'#' + prefix + 'row1_col'+c

并用它来指代其他相关元素：

for(c=1; c<=6; c++){
    $('#' + prefix + 'row1_col'+c).change(function() {
        $('#' + this.id + '_youtube, #' + this.id +'_rss_feed_url, #' + this.id +'_custom_php, #' + this.id + '_advert').fadeOut();
        $('#' + this.id + '_' + this.value).fadeIn();
        $('#' + this.id + '_' + this.value + '_url').fadeIn();
    }).change();
}

Answer 2

您应该能够通过id启动或包含某些内容来选择元素。例如

$('[id^="' + prefix + 'row1_col"]')

更新

根据你提供的HTML，试试这个

// global list
fields = [
    'youtube',
    'rss_feed_url',
    'custom',
    'social',
    'advert'
];

// inside <select> change event handler
// get row num
var row_num = this.id.replace(prefix, '').split('_')[0]; // returns 'rowN'
// get all row fields
var row_fields = $('[id^="' + prefix + row_num + '"]');
// hide all row fields
for(var i = 0; i < fields.length; i++)
    row_fields.filter('[id$="' + fields[i] + '"]').fadeOut();
// show selected (with rss_feed corner case)
row_fields.filter('[id$="' + $(this).val() + '"]').fadeIn();
row_fields.filter('[id$="' + $(this).val() + '_url"]').fadeIn();