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

这是因为您只更改font-family标记中的<style>，仅在加载时计算。

尝试直接更改元素的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
}
?>

注意，使用上面的代码，您必须在选项值中提供姓氏。

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

2 个答案: