带有变量的jquery分配和调用ID [关闭]答案

【问题标题】：jquery assign and call ID with variable [closed]带有变量的jquery分配和调用ID [关闭]
【发布时间】：2013-04-14 21:18:27
【问题描述】：

假设我有以下代码：

 textInput = $('#outputTextInput').val();

   $('#outputAdd').click(function(){

       $('#status_table tr:last').after('<tr id="output_newrow_"+textInput><td>1</td><td id="type_row_"+textInput>lala</td><td id="num_row_"+textInput>num row '+textInput+'</td><td><img class="image" src="static/OffLamp-icon.png" style="height:64px; width=64px"/></td></tr>');

    });
   $('#outputRemove').click(function(){

        $('#status_table').find("#output_newrow_"+textInput).remove();


   });

然后我想调用 ID 为 "output_newrow_"+textInput 或 "type_row_"+textInput 的选择器...

$('#how_should_i_write_it_here').append(textInput)

我不知道我应该怎么称呼那个选择器......

提前感谢所有帮助:)

更新！这是Fiddle 链接。我现在的问题是，当我添加和删除几次时，我无法显示变量“textInput”并且索引号很乱。例如，我键入“1,2,3”，它将在桌子上显示索引 2,3,4。但是当我输入 3 并单击删除时，它会删除索引 2（假设链接到 1）。

【问题讨论】：

标签： jquery variables selector

【解决方案1】：

您的代码中的字符串连接是错误的，在您的代码中index 也是undefined。

$('#outputAdd').click(function(){
   var textInput = $('#outputTextInput').val();
   var str = '<tr id="output_newrow_' +textInput + '">'
               + '<td>1</td><td id="type_row_' + textInput '">lala</td>'
               + '<td id="num_row_' + textInput + '">num row ' + textInput + '</td>'
               + '<td><img class="image" src="static/OffLamp-icon.png" style="height:64px; width=64px"/></td>'
          +  '</tr>';
   $('#status_table tr:last').after(str);

});
$('#outputRemove').click(function(){
    $("#output_newrow_"+textInput).remove();
});

【讨论】：

谢谢：D 现在对我来说很有意义（抱歉，我没有更新上面的代码）！但是 'num row ' + textInput + '' 只会在表格中显示 "num row" 而不会显示 textInput 是什么。
@yvonnezoe 不客气，请使用console.log(textInput) 看看返回什么，如果还是不行，请在jsfiddle.net提供demo
hmm... console.log 不会向我的终端返回任何内容。仅供参考，这是python代码的一部分……这有关系吗？好的，我会尝试将其转移到 jsfiddle（之前不要尝试：D）
这里是 jsfiddle 文件jsfiddle.net/yvonnezoe/KGcrf/1 :) 谢谢！
@yvonnezoe 那是因为你在页面加载时存储了值，当它为空时，我已经更新了你的小提琴，jsfiddle.net/U8Kn9

【解决方案2】：

你的字符串连接错误

$('#outputAdd').click(function(){
    var textInput = $('#outputTextInput').val();

    $('#status_table tr:last').after('<tr id="output_newrow_'+textInput+'"><td>1</td><td id="type_row_"+textInput>lala</td><td id="num_row_"+textInput>num row '+index+'</td><td><img class="image" src="static/OffLamp-icon.png" style="height:64px; width=64px"/></td></tr>');

});
$('#outputRemove').click(function(){
    $('#status_table').find("#output_newrow_"+textInput).remove();    
});

【讨论】：

你是这个意思？ id="output_newrow_'+textInput+'" 但我也试过了。它不起作用:(

【解决方案3】：

几乎与您分配它的方式相同。像这样：

$("#output_newrow_" + textInput).appen(textInput);

【讨论】：

不，它不起作用:( textInput = $('#outputTextInput').val(); $('#outputAdd').click(function(){ $('#status_table tr :last').after(' 1 lala '); $('#num_row_'+ textInput).append(textInput); }); $('#outputRemove').click(function(){