js 对象在 joomla 模块中使用带有 php 的 var

Question

我正在创建一个显示来自 ProgressBar.js 插件的进度条的 Joomla 模块。由于它是一个模块，因此需要对其进行设置，以便它可以在一页上加载多个对象，因此我无法对对象的 ID 进行硬编码。所以我使用 PHP 创建 HTML 个对象，每个对象都有自己的 ID。

<div id="progress<?php echo $module->id ?>"></div>

在这种情况下显示 id="progress198" 当我将它与它一起使用时，它完美地工作：

<script>
(function ($) {
$(document).ready(function() {

var pID = "<?php echo 'progress' . $module->id ?>";
//alert(pID);
var bar = new ProgressBar.Circle(progress198, {
  strokeWidth: 6,
  easing: 'easeInOut',
  duration: 1400,
  color: '#FFEA82',
  trailColor: '#eee',
  trailWidth: 1,
  svgStyle: null
});
bar.animate(0.8);  // Number from 0.0 to 1.0

});
})(jQuery);
</script>

正如您在此处看到的 var bar = new ProgressBar.Circle(progress198, { 此 198 现在已硬编码到其中。这不是它需要的方式。

当我尝试这样做时：var bar = new ProgressBar.Circle(pID, { 然后没有任何反应，当查看检查器时，它完全像那样显示。

但是当我取消注释 alert(pID); 时，它会显示一个带有 progress198 的警报。

所以我做错了什么，但无法弄清楚我做错了什么。在此先感谢您的帮助。

澄清问题

我应该如何将 pID 放在 var bar = new ProgressBar.Circle(INHERE, { 中而不是 INHERE.

Answer 1

如 documentation 所述，new ProgressBar.Circle(container[, options]) 中的第一个参数必须是 DOM 元素或 CSS 选择器。

您的浏览器似乎允许您通过 id 访问元素，否则

var bar = new ProgressBar.Circle(progress198, {

会抛出一个 ReferenceError: progress198 is not defined

要修复脚本，您有两个选择：

1) 先用document.getElementById()

获取元素

var bar = new ProgressBar.Circle(document.getElementById(pID), {

2) 使 pID 成为一个有效的 id 选择器，添加一个 #

var bar = new ProgressBar.Circle("#" + pID, {

js 对象在 joomla 模块中使用带有 php 的 var

js object using a var with php in joomla module

javascript

php

jquery

joomla-extensions

澄清问题