suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Javascript So generieren Sie dynamisch den Code in der JS-Datei (Skript-Tag) basierend auf der dynamisch generierten Zeichenfolge

Mein Code lautet wie folgt

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<p class="name name0">
    <p>test</p>
</p>
<p class="name name1">
    <p>test2</p>
</p>

<script>
    function func1(className) {
        return `$('${className}').find('p').text()`
    }
    
    for(var i=0;i<$('.name').length;i++){
        console.log(`name${i} p:`,func1(`.name${i}`));
    }
    //第一次循环生成语句： $('.name0').find('p').text();
    //第二次循环生成语句： $('.name1').find('p').text();
</script>
</body>
</html>

Ich möchte nicht den Wert jedes P erhalten, nur als Analogie. Ich möchte wissen, wie der Code in <script> über den Rückgabewert von func1() dynamisch gerendert wird. Oder wie man JS-Dateien dynamisch rendert

Ich möchte, dass diese Datei des aktuellen Codes dynamisch js-Code basierend auf .name p generiert, z. B.
wenn es zwei .name p gibt

<p class="name name0">
    <p>test</p>
</p>
<p class="name name1">
    <p>test2</p>
</p>

Dann sollte der endgültige Code in <script> lauten 

<script>
    $('.name0').find('p').text();
    $('.name1').find('p').text();

</script>

Wenn es drei .name p gibt

<p class="name name0">
    <p>test</p>
</p>
<p class="name name1">
    <p>test2</p>
</p>
<p class="name name2">
    <p>test3</p>
</p>

Dann sollte der endgültige Code in <script> lauten 
<script>
    $('.name0').find('p').text();
    $('.name1').find('p').text();
    $('.name3').find('p').text();
</script>

Wie können wir diesen Effekt erzielen?

三叔三叔2725 Tage vor801

Antworte allen(2)Ich werde antworten

  • 阿神

    阿神2017-06-12 09:31:03

    你是想fun1() 里面的return的结果作为执行js语句？？可以用eval()才执行

    Antwort
    0
  • 三叔

    三叔2017-06-12 09:31:03

    你可以直接定义 fun1 返回指定 className DOM 的 text，后面直接跑就行哇。反正你生成代码也是想立即执行的。

    function func1(className) {
    return $(className).find("p").text();
}

for (var i = 0; i < $(".name").length; i++) {
    console.log(`name${i} p:`, func1(`.name${i}`));
}

    你不需要动态生成脚本啊，脚本本身是很灵活的东西。下面这段代码与你想生成的那一段等效

    var textArray = $(".name p")
    .map(function() {
        return $(this).text()
    }).toArray();

    如果你想循环处理每一个 .name p 可以直接

    $(".name p")
    .each(function() {
        $p = $(this);
        // ....
    })

    如果你想处理指定名称的，可以

    // ES6 语法，若需要可转换为 es5 的
var textArray = ["name1", "name2", "namen"]
    .map(name => $(`.${name}`))
    .map($name => $name.children("p").text());
    // 这里本来就是原生数组，不需要 toArray()

    所以你要做的事情一定非要用动态生成脚本来处理吗？如果真的需要，这一般也是服务端干的事情，而不是前端干的事情。前端可以生成脚本来运行，就一定可以直接运行某段代码……

    Antwort
    0
  • StornierenAntwort