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);
    });
});

Answer 2

這是因為僅在<style>標記中更改了font-family ，僅在加載時才計算。

嘗試直接更改元素的CSS：

編輯兩個（或多個） <select> ，它們在之后立即更改<div>的字體...

<?php
function YPE_bsn_font() { ?>
<style id="bsn-font-loader" type="text/css">
    .textloader {border:1px solid #ddd;margin:5px 0 0;padding:10px;background:#f8f8f8;}
</style>

<select class="fonts">
    <option value="arial">Font one</option>
    <option value="Lucida Console">Font two</option>
</select>
<div class="textloader">
    Suzy and Sally are partying...
</div>

<br>
<br>
<select class="fonts">
    <option value="arial">Font one</option>
    <option value="Lucida Console">Font two</option>
</select>
<div class="textloader">
    The Quick Brown Fox Jumps Over The Lazy Dog. 1234567890
</div>

<script>
$(".fonts").change(function() {
    var newFont = $(this).find("option:selected").val();
    var newFontID = newFont.split(' ').join('-');
    $(this).next('.textloader').attr('id', ''+newFontID+'').css({"font-family":newFont});
});
</script><?php
}
?>

注意 ，使用以上代碼，您必須在選項值中提供族名稱。