PHP 函数中的 javaScript 代码仅在第一次调用时有效

Question

我下面的 PHP 函数包含一些 Javascript 代码，该函数工作完美。但 JavaScript 代码仅适用于第一个 PHP 调用函数。当我第二次调用另一个地方的函数时，JavaScript 代码仍保留为第一次调用，并且不会根据第二次调用数据进行更改。

<?php
function YPE_bsn_font() { ?>
<select id="fonts">
    <option value="">Font one</option>
    <option value="">Font two</option>
</select>
<div class="textloader">
    <?phpecho __('The Quick Brown Fox Jumps Over The Lazy Dog. 1234567890');?>
</div>
<style id="bsn-font-loader" type="text/css">
    .textloader {border:1px solid #ddd;margin:5px 0 0;padding:10px;background:#f8f8f8;}
</style>
<script>
jQuery(document).ready(function($) {

    $("#fonts").change(function() {
        var optionName = $("#fonts option:selected").text();
        var fontName = optionName.split(' ').join('-');
        $('.textloader').attr('id', ''+fontName+'');
        $("#bsn-font-loader").text('#'+fontName+' {font-family: "'+ optionName +'"}');
    });
});
</script><?php
}
?>

Answer 1

我不知道为什么需要在 php 函数中添加这段代码!但无论如何，这不是更改元素 css 属性的方法

这里是您需要的建议解决方案

jQuery(document).ready(function() {
    $("#fonts").change(function() {
        var optionName = $("#fonts option:selected").text();
        var fontName = optionName.split(' ').join('-');
        $('.textloader').css('font-family', fontName);
    });
});