javascript - PHP 变量在 JS 中不起作用

Question

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

它工作正常，但是如果我尝试使用 PHP 插入 DIV 数字 ID，则会失败。

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

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

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

<?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>

我在这里创建了工作代码的jsfiddle:http://jsfiddle.net/RGQaU/

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

非常感谢任何想法。

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

Answer 1

也许你应该尝试清理你的代码，我会将该值写入 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>

那么，为什么你应该总是使用这种方式:

1. 这样您就可以将问题集中在一处，更易于调试
2. 您始终可以使用控制台调试来检查 JavaScript 变量中存储的值:示例
3. 如果您回显以下内容，这些双引号将作为后备: false、null ... 防止可能阻止整个页面 javascript 执行的 js 错误。