javascript 如何根據動態產生的字串然後動態產生JS檔案(script標籤)裡面的程式碼
三叔
三叔 2017-06-12 09:29:03
0
2
816

我的程式碼如下

<!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>

我並不是想取得每個P的值,只是打個比方。我想知道如何才能透過func1()的回傳值動態渲染<script>裡面的程式碼?或是如何才能動態渲染js檔案

我想目前程式碼的這個檔案根據.name p 動態產生js程式碼,如
當有兩個.name p

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

那麼<script>裡面最終的程式碼應該是

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

</script>

當有三個.name p

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

那麼<script>裡面最終的程式碼應該是

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

請問一下如何才能達到這樣的效果?

三叔
三叔

全部回覆(2)
阿神

你是想fun1() 裡面的return的結果當執行js語句? ?可以用eval()才執行

三叔

你可以直接定義 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()

所以你要做的事情一定要用動態產生腳本來處理嗎?如果真的需要,這一般也是服務端幹的事情,而不是前端做的事情。前端可以產生腳本來運行,就一定可以直接運行某段程式碼…

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板