Question

我正在开发一个涉及一些严肃的Javascript的网站，我必须在我的JS代码中使用来自PHP的生成数据。

例如，为了能够在JS中使用我的页面ID，我就这样继续：

<input type="hidden" id="pageId" value="<?php echo $page->getId() ?>" />
<button id="runJs">RUN</button>

在我的javascript（使用jQuery）中：

$(function() {
  $('#runJs').click(function() {
    var id = $('#pageId').val();
  });
});

它有效，但有更清洁的方法吗？

Answer 1

自HTML5起，现在可以将用户自定义的属性添加到任何HTML标记，只要它以data- 开头。

在HTML5中：

<button id="runJs" data-pageId="<?php echo $page->getId() ?>">RUN</button>

在JS中：

$(function() {
  $('#runJs').click(function() {
    var id = $(this).attr('data-pageId');
  });
});

或者，如评论中所说 Eric Martinez ，使用jQuery：

var id = $(this).data('pageId');

以这种方式传递数据更加清晰有两个原因：

它没有使用可能令人困惑的侧标记。
您传递的数据包含在按钮中，这意味着具有自己的data-XXX的另一个按钮可以使用相同的JS功能，即使在同一页面上也是如此。

示例

HTML：

<button data-value="5">Square it!</button> <button data-value="7">Square it!</button> <button data-value="12">Square it!</button>

JS：

$(function() { $('button').click(function() { var value = $(this).attr('data-value'); alert(value * value); // Shows 25, 49 or 144 depending of the button pressed. }); });

该功能不知道按钮。只要涉及到JS，这些按钮甚至不需要ID。

Answer 2

您可以在标记内创建变量。像这样：

<script>
    var pageId = '<?php echo $page->getId(); ?>';
</script>

稍后在您的脚本中：

$(function() {
    $('#runJs').click(function() {
        var id = pageId;
    });
});

如何避免使用隐藏字段将数据从PHP传递到Javascript？

2 个答案: