0

我总共有六行字段，其中包含从 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();

我试过for循环但没有用可能是我做错了什么，因为我对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>
4

2 回答 2

0

您应该能够通过 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();
于 2013-07-27T18:37:04.863 回答
0

由于您在 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();
}
于 2013-07-27T18:46:51.893 回答