Javascript - JQuery追加功能和使用引号

时间:2012-12-04 09:45:07

标签: javascript jquery html

我的代码中有一个大的追加函数。在这个追加函数中,我用一些文本填充textarea。在本文中,我也可以使用引号(“)并且这会导致问题,因为我的append函数会将这些引号解释为断开引号,而不应该。”/ / p>

你对如何逃避这些报价有一个想法吗?谢谢。

编辑:这是我的追加功能:

$('#add_affiliation').append(
            '<div id="affiliation_'+affiliation_id+'title" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">'+
                '<span id="affiliation_title'+affiliation_id+'" class="ui-dialog-title">Affiliation '+affiliation_id+'</span>'+
                '<a href="#delete_affiliation" id="delete_affiliation_'+affiliation_id+'" onclick="deleteAffiliation(\''+affiliation_id+'\');" >'+
                    '<img style="float:right" src="/css/images/delete_affiliation.png" />'+
                '</a>'+
            '</div>'+
            '<div id="affiliation_'+affiliation_id+'content" class="ui-dialog-content ui-widget-content">'+
                '<label for="add_affiliations"></label>'+
                '<div id="add_affiliation_'+affiliation_id+'" style="overflow: hidden" class="element">'+
                    '<table id="affiliation_table" style="table-layout:fixed;">'+
                    '<tbody>'+
                        '<tr>'+
                            '<td style="height:30px; width:65px;" align="right"><font size="2"><b>N°:</b></font></td>'+
                            '<td align="left" style="height:30px; width:700px;">'+
                                '<input type="text" name="number"; id="number'+affiliation_id+'"; value="'+article_affiliations[i].number+'" />'+
                            '</td>'+
                        '</tr>'+
                        '<tr>'+
                            '<td style="height:30px; width:65px;" align="right"><font size="2"><b>Affiliation:</b></font></td>'+
                            '<td align="left" style="height:30px; width:700px;">'+
                                '<input type="text" name="affiliation" id="affiliation'+affiliation_id+'" value="'+article_affiliations[i].name+'" style="width: 100%;" />'+
                            '</td>'+
                        '</tr>'+
                        '<tr>'+
                            '<td style="height:30px; width:65px;" align="right"><font size="2"><b>Country:</b></font></td>'+
                            '<td align="left" style="height:30px; width:700px;">'+
                            '<select id="country'+affiliation_id+'";></select>'+
                            '<img style="vertical-align:bottom; " src="/css/images/Warning.png"; id="country_warning'+affiliation_id+'"; width="20px"; height="20px"; alt="-"; />'+
                            '<span id="country_warning_message'+affiliation_id+'" style="visibility:hidden; color:red;"></span>'+
                            '</td>'+
                        '</tr>'+
                    '</tbody>'+
                '</table>'+
            '</div>'+
        '</div>');

2 个答案:

答案 0 :(得分:2)

我基本上会定期附加,不带给出任何值,然后在每个元素上使用.find(selector).val(value)

$('<div id="affiliation_'+affiliation_id+'title" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">'+
            '<span id="affiliation_title'+affiliation_id+'" class="ui-dialog-title">Affiliation '+affiliation_id+'</span>'+
            '<a href="#delete_affiliation" id="delete_affiliation_'+affiliation_id+'" onclick="deleteAffiliation(\''+affiliation_id+'\');" >'+
                '<img style="float:right" src="/css/images/delete_affiliation.png" />'+
            '</a>'+
        '</div>'+
        '<div id="affiliation_'+affiliation_id+'content" class="ui-dialog-content ui-widget-content">'+
            '<label for="add_affiliations"></label>'+
            '<div id="add_affiliation_'+affiliation_id+'" style="overflow: hidden" class="element">'+
                '<table id="affiliation_table" style="table-layout:fixed;">'+
                '<tbody>'+
                    '<tr>'+
                        '<td style="height:30px; width:65px;" align="right"><font size="2"><b>N°:</b></font></td>'+
                        '<td align="left" style="height:30px; width:700px;">'+
                            '<input type="text" name="number"; id="number'+affiliation_id+'"; value="" />'+
                        '</td>'+
                    '</tr>'+
                    '<tr>'+
                        '<td style="height:30px; width:65px;" align="right"><font size="2"><b>Affiliation:</b></font></td>'+
                        '<td align="left" style="height:30px; width:700px;">'+
                            '<input type="text" name="affiliation" id="affiliation'+affiliation_id+'" value="" style="width: 100%;" />'+
                        '</td>'+
                    '</tr>'+
                    '<tr>'+
                        '<td style="height:30px; width:65px;" align="right"><font size="2"><b>Country:</b></font></td>'+
                        '<td align="left" style="height:30px; width:700px;">'+
                        '<select id="country'+affiliation_id+'";></select>'+
                        '<img style="vertical-align:bottom; " src="/css/images/Warning.png"; id="country_warning'+affiliation_id+'"; width="20px"; height="20px"; alt="-"; />'+
                        '<span id="country_warning_message'+affiliation_id+'" style="visibility:hidden; color:red;"></span>'+
                        '</td>'+
                    '</tr>'+
                '</tbody>'+
            '</table>'+
        '</div>'+
    '</div>')
    .find('#number' + affiliation_id)
        .val(article_affiliations[i].number)
        .end()
    .find('#affiliation' + affiliation_id)
        .val(article_affiliations[i].name)
        .end()
    .appendTo('#add_affiliation')

Demo

答案 1 :(得分:1)

只需在引号 \“之前使用反对或使用单引号来包含字符串'”'

记住字符串可以用单引号分隔(在这种情况下,双引号内部不需要转义)或双引号(在这种情况下,单个quoutes不需要转义)。

此外,您可以使用类似

的内容
var doubleQuoutesEscaped = originalString.split('"').join('\\"');
var singleQuoutesEscaped = originalString.split("'").join("\\'");