元素ID的循环的jQuery

我总共有六行字段包含从1到3的列，例如前缀_row1_content_col1有3列

第1列第1列、第1列第2列、第1列第3列，但其他可以有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>

---

您应该能够按id选择元素。例如

使现代化 基于您提供的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();

---

由于您正在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();
}

---

你为什么不想使用类？由数组键生成的字段不允许在我要显示的部分添加类/hideCould you show html code？@twi我已经用markupI更新了我的问题。我总共有5个字段，其中包含单词：ids youtube、rss_feed、custom、social、，现在广告这个值，我从下拉选择。那个么，我如何在代码中使用这些词来获取选择选项值呢？在选择字段上有ID吗？它看起来像什么？是的，我在选择字段上有ID，还有我想要隐藏的元素和隐藏方式。在ID中包含select option一词的元素。例如，如果选项为youtube，则元素ID类似于row1\u col1\u youtube\u video\u ID，类似于所有其他元素的ID，但不清楚！：您的意思是用+this.id+替换+prefix+'row1\u col'+c吗？如果这是你要问的，但我的元素id包含了定义id的单词。我的意思是_youtube、_rss\u feed\u url等等。更新了一些上下文，也许这会有帮助？谢谢你的代码，但是你更改了选择ID，如果我正在更改它，它将不会对我的代码起作用。相信有许多ID类似于row1_col1，导致了这个问题。你使用的是标题而不是youtube-确保你的HTML实际上是正确的啊！我的错。。我刚刚粘贴了标题字段的代码。我会更新的

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();
}