javascript Bagaimana untuk menjana kod secara dinamik dalam fail JS (teg skrip) berdasarkan rentetan yang dijana secara dinamik
三叔
三叔 2017-06-12 09:29:03
0
2
859

Kod saya adalah seperti berikut

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

Saya tidak mahu mendapatkan nilai setiap P, hanya sebagai analogi. Saya ingin tahu cara memaparkan kod secara dinamik di dalam <skrip> Atau bagaimana untuk memaparkan fail js secara dinamik

Saya mahu fail kod semasa ini menjana kod js secara dinamik berdasarkan .name p, seperti
apabila terdapat dua .name p

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

Kemudian kod akhir dalam <skrip>

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

</script>

Bila ada tiga .nama 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>

Kemudian kod akhir dalam <skrip>
<script>
    $('.name0').find('p').text();
    $('.name1').find('p').text();
    $('.name3').find('p').text();
</script>

Bagaimana kita boleh mencapai kesan ini?

三叔
三叔

membalas semua(2)
阿神

Adakah anda mahu hasil pulangan dalam fun1() digunakan sebagai pernyataan js pelaksanaan? ? Anda boleh menggunakan eval() untuk melaksanakan

三叔

Anda boleh mentakrifkan fun1 secara langsung untuk mengembalikan teks className DOM yang ditentukan, dan kemudian jalankannya terus. Bagaimanapun, apabila anda menjana kod, anda mahu melaksanakannya dengan segera.

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

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

Anda tidak perlu menjana skrip secara dinamik, skrip itu sendiri sangat fleksibel. Kod di bawah adalah bersamaan dengan yang anda ingin hasilkan

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

Jika anda ingin mengulang setiap .name p anda boleh terus

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

Jika anda ingin memproses nama yang dinyatakan, anda boleh

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

Jadi apa yang anda mahu lakukan mesti dikendalikan oleh skrip yang dijana secara dinamik? Jika ia benar-benar diperlukan, ini biasanya sesuatu yang pelayan lakukan, bukan bahagian hadapan. Jika bahagian hadapan boleh menjana skrip untuk dijalankan, ia pasti boleh menjalankan sekeping kod tertentu secara langsung...

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan