Question

我正在尝试将一个变量添加到我动态生成的div标签的名称中。这就是我对div的看法

var level4_div = "<div class=\"level4_main text\" style=\"overflow: hidden; clear: both; background-color: #E6E6E6; margin: 5px 0 5px 50px; padding: 5px;\"><div style=\"float: left; width: 60px; padding-top: 5px;\"><b>Safety Verification Method:</b></div><div style=\"float: left;\"><input type=\"text\" name=\"field_\" id=\"field_\" size=\"35\" /></div></div>";

而不是每次都说“安全验证方法”，我希望它说“安全验证方法1.1.1”，其值增加。我已经在名为'field'的存储变量中增加了值。小号

<b>"'+field+'"Safety Verification Method:</b></div>

但它一直让我错误。

编辑：要重新解释这个问题，因为我在开头生成div标签并在之后创建索引变量，如何以这种方式更新它;类似于

$(level3_div).appendTo(level3_parent).find("input").attr("name",level2_id+"-"+index_3).attr("id",level2_id+"-"+index_3);

除了显示名称而不是id。

完整源代码

var spacer = "<div style=\"clear: both; height: 1px;\"></div>";                           

var level2_div = "<div class=\"level2_main text\" style=\"border-bottom: 1px solid #000; overflow: hidden; clear: both; padding: 5px;\"><div style=\"float: left; width: 60px; padding-top: 5px;\"><b>Level 2:</b></div><div style=\"float: left;\"><input type=\"text\" name=\"field_\" id=\"field_\" size=\"35\" /></div><div style=\"float: left; padding-left: 10px; padding-top: 5px;\"><a href=\"#\" class=\"addlevel3\">Add Hazard Control</a></div></div>";

var level3_div = "<div class=\"level3_main text\" style=\"overflow: hidden; clear: both; background-color: #F6F6F6; margin: 5px 0 5px 25px; padding: 5px;\"><div style=\"float: left; width: 60px; padding-top: 5px;\"><b>Hazard Controls:</b></div><div style=\"float: left;\"><input type=\"text\" name=\"field_\" id=\"field_\" size=\"35\" /></div><div style=\"float: left; padding-left: 10px; padding-top: 5px;\"><a href=\"#\" class=\"addlevel4\">Add Safety Verification Method</a></div></div>";

var level4_div = "<div class=\"level4_main text\" style=\"overflow: hidden; clear: both; background-color: #E6E6E6; margin: 5px 0 5px 50px; padding: 5px;\"><div style=\"float: left; width: 60px; padding-top: 5px;\"><b>Safety Verification Method:</b></div><div style=\"float: left;\"><input type=\"text\" name=\"field_\" id=\"field_\" size=\"35\" /></div></div>";

var index_2 = 16;
$("#container").on('click','.addlevel2', function() {
    $(level2_div).insertAfter(".level2_main:last").find("input").attr("name","field_"+index_2).attr("id","field_"+index_2);
    index_2++;

    return false;
});

var index_3 = 1;
$("#container").on('click','.addlevel3', function() {
    var level3_parent = $(this).parents(".level2_main");
    var level2_id = $(level3_parent).find("input").attr("id");
    var div3_exists = $(level3_parent).find('.level3_main');
    var div3_count = $(div3_exists).length;
    var level3_counter = "<input type=\"hidden\" name=\"hidden_\" id=\"hidden\" />";

    if (div3_count == "0") {
        index_3 = 1;
        $(level3_counter).appendTo(level3_parent).attr("name","hidden_"+level2_id).attr("id","hidden_"+level2_id).attr("value",index_3);
        $(spacer).appendTo(level3_parent);
        $(level3_div).appendTo(level3_parent).find("input").attr("name",level2_id+"-"+index_3).attr("id",level2_id+"-"+index_3);

    } 
    else 
    {
        index_3 = div3_count + 1;
        $("#hidden_"+level2_id).attr("value",index_3);    
        $(level3_div).appendTo(level3_parent).find("input").attr("name",level2_id+"-"+index_3).attr("id",level2_id+"-"+index_3);
    }
    index_3++;
    console.log(index_3);
    return false;
});

编辑＃2：

我要做的是更改每个动态生成的div标签名称，而不仅仅是第一个版本。例如，第一个div标签将显示为“Hazard Control 1”，生成的下一个标签将显示为“Hazard Control 2”，依此类推，而原始的“Hazard Control 1”仍然保持这种状态并且没有变化。

HTML

<left><div class="tabs" align="left">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">VTL</a></li>
    </ul>
    <div class="tab-content" align="left">

        <div id="container" style="width: 90%; border: 1px solid #000;">


    <div class="level2_main text" style="border-bottom: 1px solid #000; overflow: hidden; clear: both; padding: 5px;">

      <div style="float: left; width: 60px; padding-top: 5px;"><b>Hazard Cause #1:</b></div>

      <div style="float: left;">

        <input type="text" name="field_1" id="field_1" size="35" />

      </div>

      <div style="float: left; padding-left: 10px; padding-top: 5px;"><a href="#" class="addlevel3">Add Hazard Control</a></div>

    </div>

    <div class="level2_main text" style="border-bottom: 1px solid #000; overflow: hidden; clear: both; padding: 5px;">

      <div style="float: left; width: 60px; padding-top: 5px;"><b>Hazard Cause #2:</b></div>

      <div style="float: left;">

        <input type="text" name="field_2" id="field_2" size="35" />

      </div>

      <div style="float: left; padding-left: 10px; padding-top: 5px;"><a href="#" class="addlevel3">Add Hazard Control</a></div>

    </div>

    <div class="level2_main text" style="border-bottom: 1px solid #000; overflow: hidden; clear: both; padding: 5px;">

      <div style="float: left; width: 60px; padding-top: 5px;"><b>Hazard Cause #3:</b></div>

      <div style="float: left;">

        <input type="text" name="field_3" id="field_3" size="35" />

      </div>

      <div style="float: left; padding-left: 10px; padding-top: 5px;"><a href="#" class="addlevel3">Add Hazard Control</a></div>

    </div>

    <div class="level2_main text" style="border-bottom: 1px solid #000; overflow: hidden; clear: both; padding: 5px;">

      <div style="float: left; width: 60px; padding-top: 5px;"><b>Hazard Cause #4:</b></div>

      <div style="float: left;">

        <input type="text" name="field_4" id="field_4" size="35" />

      </div>

      <div style="float: left; padding-left: 10px; padding-top: 5px;"><a href="#" class="addlevel3">Add Hazard Control</a></div>

    </div> 
    <div class="level2_main text" style="border-bottom: 1px solid #000; overflow: hidden; clear: both; padding: 5px;">

      <div style="float: left; width: 60px; padding-top: 5px;"><b>Hazard Cause #5:</b></div>

      <div style="float: left;">

        <input type="text" name="field_5" id="field_5" size="35" />

      </div>

      <div style="float: left; padding-left: 10px; padding-top: 5px;"><a href="#" class="addlevel3">Add Hazard Control</a></div>

    </div> 

    <div><input type="hidden" name="leveltwototal" id="leveltwototal" value="6" size="35" /></div>

  </div>

任何帮助表示赞赏！谢谢！

Answer 1

您可以在想要显示动态文字的地方使用空span。然后改变这个范围的内容。

var level3_div = "<div class=\"level3_main text\" style=\"overflow: hidden; clear: both; background-color: #F6F6F6; margin: 5px 0 5px 25px; padding: 5px;\"><div style=\"float: left; width: 60px; padding-top: 5px;\"><b>Hazard Controls:</b></div><div style=\"float: left;\"><input type=\"text\" name=\"field_\" id=\"field_\" size=\"35\" /></div><div style=\"float: left; padding-left: 10px; padding-top: 5px;\"><a href=\"#\" class=\"addlevel4\">Add Safety Verification Method<span class=\"safety-verification-counter\"></span></a></div></div>";

当点击按钮时，我添加了这行代码以定位相应的span元素。

 $("#"+level2_id+"-"+index_3).parent().next().find('.safety-verification-counter').text(' 1.1.'+index_3);

以下是基于您的代码的工作示例

https://jsfiddle.net/tpdm688o/3/

Answer 2

如果你使用单引号和双引号，你可以避免逃脱这么多。在这里重写：

var level4_div = "<div class='level4_main text' style='overflow: hidden; clear: both; background-color: #E6E6E6; margin: 5px 0 5px 50px; padding: 5px;'><div style='float: left; width: 60px; padding-top: 5px;'><b>Safety Verification Method " + field + ":</b></div><div style='float: left;'><input type='text' name='field_' id='field_' size='35' /></div></div>";

编辑：

在看到您的更改后，您可以执行类似的操作，以便在事后进行编辑。

$(level3_div).appendTo(level3_parent).find("input").attr("name",level2_id+"-"+index_3).attr("id",level2_id+"-"+index_3).children("b").html(index_3 + " Safety Verification Method:");

Answer 3

满足您需求的最简单方法是更换零件。

var field = '1.1.1';
var level4_div = "<div class=\"level4_main text\" style=\"overflow: hidden; clear: both; background-color: #E6E6E6; margin: 5px 0 5px 50px; padding: 5px;\"><div style=\"float: left; width: 60px; padding-top: 5px;\"><b>Safety Verification Method:</b></div><div style=\"float: left;\"><input type=\"text\" name=\"field_\" id=\"field_\" size=\"35\" /></div></div>";

console.log(level4_div.replace('Safety Verification Method:', 'Safety Verification Method: ' + field));

如何将变量添加到div标签名称中？

3 个答案: