Блог

Я хотел бы изменить цвет текста в зависимости от того, на какую страницу нажимается с помощью PHP.

HTML

 <a class="link" href="index.php?col=red">Red</a>
<a class="link" href="index.php?col=gre">Green</a>
<a class="link" href="index.php?col=yel">Yellow</a>
<?php
    if (isset($_GET['col'])) {
        $color = $_GET['col'];
    }else{
        $color = "red";
    }
?>
<div class="toChange">
    Color is changing
</div>
  

Скрипт

 $('.link').click(function () {

    var jcolor = <?php echo $color; ?>;

    if (jcolor == "red") {
        $(".toChange").css({
            "color": "red"
        });
    }
    if (jcolor == "gre") {
        $(".toChange").css({
            "color": "green"
        });
    }
    if (jcolor == "yel") {
        $(".toChange").css({
            "color": "yellow"
        });
    }
});
  

Почему не работает?
Я также попытался вставить console.log(jcolor) for, чтобы посмотреть, jcolor принимает ли он правильное значение и работает ли ОС нормально.

PHP (на стороне сервера) запускается первым при перезагрузке страницы после запуска кода PHP javascript (на стороне клиента)…

Итак,

Этот код выполняется первым при загрузке страницы

 <?php
        if (isset($_GET['col'])) {
            $color = $_GET['col'];
        }else{
            $color = "red";
        }
  ?>
  

Теперь цвет красный

Когда вы нажимаете на ссылку

этот JS будет запущен первым

 <script>

    $('.link').click(function(){

        var jcolor = <?php echo $color; ?>;


        if (jcolor == "red") {
            $(".toChange").css({"color": "red"});

        }
        if (jcolor == "gre") {
            $(".toChange").css({"color": "green"});

        }
        if (jcolor == "yel") {
            $(".toChange").css({"color": "yellow"});

        }


    });

    </script>
  

это изменит цвет, но после этого страница перезагрузится, потому что вы нажали на ссылку…

Теперь, позвольте вам нажать на зеленый

 <a class="link" href="index.php?col=gre">Green</a>
  

Ваш новый URL будет index.php?col=gre

Этот код будет выполнен снова

 <?php
        if (isset($_GET['col'])) {
            $color = $_GET['col'];
        }else{
            $color = "red";
        }
  ?>
  

Итак, проблема заключается в том, что вместо .click события используется javascript. (document).ready и ваша проблема будет решена…

 <script>

        $(document).ready(function(){

            var jcolor = <?php echo $color; ?>;


            if (jcolor == "red") {
                $(".toChange").css({"color": "red"});

            }
            if (jcolor == "gre") {
                $(".toChange").css({"color": "green"});

            }
            if (jcolor == "yel") {
                $(".toChange").css({"color": "yellow"});

            }


        });

        </script>
  

Измените это:

var jcolor = <?php echo $color; ?>;

к этому:

var jcolor = '<?php echo $color; ?>';

Примечание: это уязвимо для XSS. Вы вводите код непосредственно из пользовательского ввода, и это чрезвычайно опасно. Очистите эти входные данные перед их печатью на странице.

Попробуйте изменить свой скрипт с помощью приведенного ниже кода, не нужно запускать событие click на .link потому что вы уже нажали на ссылку ( <a> ) и получили цвет из URL, Также всякий раз, когда вы присваиваете значения из переменной PHP JS, заключайте PHP-код в одинарные или двойные кавычки, например, так '<?php echo $color; ?>'

 <script>

    var jcolor = '<?php echo $color; ?>';


    if (jcolor == "red") {
        $(".toChange").css({"color": "red"});
    }

    if (jcolor == "gre") {
        $(".toChange").css({"color": "green"});
    }

    if (jcolor == "yel") {
        $(".toChange").css({"color": "yellow"});
    }

</script>
  

JS ожидает строковое значение, и это потому, что позже вы сравниваете с if (jcolor == "red") { ,

итак, что вы на самом деле делаете, это присваиваете переменную другой, которая, я уверен, выдаст вам сообщение об ошибке, если вы посмотрите на консоль, которую вы найдете undefined для упомянутой переменной

итак, все, что вам нужно, это просто добавить значение в виде строки внутри «»

 var jcolor = "<?php echo $color; ?>";