Блог

У меня ниже функция 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
}
?>
  

Я не знаю, зачем вам нужно добавлять этот код в функцию 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);
    });
});
  

Это потому, что вы меняете font-family only в <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
}
?>
  

Обратите внимание, что в приведенном выше коде вы должны указать имена семейств в значениях параметров.