Javascript JS中的PHP变量不工作

我有一个div列表，当单击它时，它应该隐藏顶部div以显示下面的文本

它工作得很好，但是如果我尝试使用PHP插入DIVs数字ID，它就会失败

例如，如果我这样做，它将应用于正确的DIV

<script>
    $('.reveal2').on({
        click: function(){
            $('.remove2').css({display: 'none'});
        $('.code2').css({display: 'block'});
        }
    });
</script>

$（'.reveal2'）。在({
单击：函数（）{
$（'.remove2'）.css（{display:'none'}）；
$（'.code2'）.css（{display:'block'}）；
}
});

但是，如果我这样做，它就不起作用了：

<?php $example = '2'; ?>

<script>
    $('.reveal<?php echo $example ?>').on({
        click: function(){
            $('.remove<?php echo $example ?>').css({display: 'none'});
        $('.code<?php echo $example ?>').css({display: 'block'});
        }
    });
</script>

$（'.reveal'）。在({
单击：函数（）{
$（'.remove'）.css（{display:'none'}）；
$（'.code'）.css（{display:'block'}）；
}
});

我已经在这里创建了一系列工作代码：

我不明白为什么插入php变量会使这不起作用

非常感谢您的任何想法

更新：我在jQuery库上使用了defer，在关闭defer之后，上面的操作就成功了。但是我需要推迟jQ，我已经尝试在window.onload中包装上述代码，但仍然不起作用。

$（'.remove'））
$('.remove<?php echo $example ?>')

当然是因为没有分号

或者，尝试以下方法：

<script>
    $(document).ready(function() {
        $('.reveal<?php echo $example; ?>').on({
            click: function() {
                $('.remove<?php echo $example; ?>').css({display: 'none'});
                $('.code<?php echo $example; ?>').css({display: 'block');
            }
        });
    });
</script>

$（文档）.ready（函数（）{
$（'.reveal'）。在({
单击：函数（）{
$（'.remove'）.css（{display:'none'}）；
$（'.code'）.css（{display:'block'）；
}
});
});

您的报价不太正确：

更改：

$('reveal<?php echo $example ?>').on({

$（'discover'）。在({

致：

$（'.reveal'）。打开({

---

在您使用它的每个地方。

也许您应该尝试清理代码，我会将该值写入js变量，如下所示：

<?php $example = '2'; ?>

<script>
    var example = "<?php echo $example ?>";
    $('.reveal'+example).on({
        click: function(){
            $('.remove'+example).css({display: 'none'});
        $('.code'+example).css({display: 'block'});
        }
    });
</script>

var示例=”；
$（'.discover'+示例）.on({
单击：函数（）{
$（'.remove'+示例）.css（{display:'none'}）；
$（'.code'+示例）.css（{display:'block'}）；
}
});

那么，为什么您总是使用这种方式：

这样，您就可以将问题保留在一个地方，更易于调试

您始终可以使用控制台调试来检查存储在javascript变量中的值：example

这些双引号将作为备用，以防您回显类似于：false、null……的内容，从而防止js错误导致整个页面javascript无法执行

---

当您尝试PHP版本时，生成的html源代码是什么样子的？嗨，伙计们，完全一样，它输出.reveal2、.remove2等。您可以使用相对选择器，如.prev（）和.next（），而不是按类或ID以元素为目标，并且有一个通用函数，而不是一堆特定的函数。

<?php $example = '2'; ?>

<script>
    var example = "<?php echo $example ?>";
    $('.reveal'+example).on({
        click: function(){
            $('.remove'+example).css({display: 'none'});
        $('.code'+example).css({display: 'block'});
        }
    });
</script>