问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

javascript 如何根据动态生成的字符串然后动态生成JS文件(script标签)里面的代码

头像
木风车
    296115665

    我的代码如下

    <!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>
<div class="name name0">
    <p>test</p>
</div>
<div class="name name1">
    <p>test2</p>
</div>

<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 div 动态生成js代码，如
    当有两个.name div

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

    那么<script>里面最终的代码应该是

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

</script>

    当有三个.name div

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

    那么<script>里面最终的代码应该是

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

    请问一下如何才能实现这样的效果？

    javascript
    阅读 5.4k
    2 个回答
    得票最新
    头像
    Tims
      1.9k1311

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

      头像
      边城
        59.8k157274

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

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

        撰写回答
        你尚未登录，登录后可以
        • 和开发者交流问题的细节
        • 关注并接收问题和回答的更新提醒
        • 参与内容的编辑和改进，让解决方法与时俱进
        推荐问题