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

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 库上使用延迟，在关闭上述延迟后工作。但是我需要推迟 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错误。

Answer 2

$('.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>

Answer 3

你的引用不太正确：

改变：

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

至：

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

在你使用它的每个地方。