Question

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

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

现在我正在尝试根据下拉选择值隐藏表单字段，如果我手动添加所有ID但是无论如何（不添加类）我不需要为每一行编写代码，它工作正常吗？< / p>

例如对行和col使用嵌套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

您应该能够按ID starting or containing something选择元素。例如

$('[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();

用于元素ID的jQuery for循环

1 个答案:

更新