在自定义 joomla 模块中包含 javascript 函数

Question

我有一个使用一些 javascript 的工作 codepen https://codepen.io/cbold/pen/jOWONKO

我很难理解将 javascript 函数包含在我的自定义 Joomla 模块中的正确方法/语法。

我已经阅读了官方文档，但它并没有让我更清楚

https://docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page

我还查看了 Stackoverflow 上发布的其他几个类似问题，但我对任何示例/答案的理解不足以将它们应用于我的模块。

我尝试将该函数作为单独的文件包含在内，并使用我的 mod_mymodule.php 调用它：

$document = JFactory::getDocument();
$document->addScript(JURI::root(true)."modules/mod_mymodule/js/ mod_mymodule.js");

这是 mod_mymodule.js 中的 javascript：

function clickHandler(target) {
    // Get the element that should be selected
    const elem = document.querySelector(target);
    // There were no elements to be selected
    if (!elem) return;
    // Get the old selected element (if any)
    const prevElem = document.querySelector('.selected');
    if (prevElem) {
        // If there was a previously selected element, it isn't anymore
        prevElem.classList.remove('selected');
    }
    // Make the new element selected
    elem.classList.add('selected');
}

该功能不发生。

我都试过了 document.querySelector(target);和 document.querySelector('#target');

我也尝试在模块的 default.php 末尾包含该函数

<script type="application/javascript">
function clickHandler(target) {
    // Get the element that should be selected
    const elem = document.querySelector(target);
    // There were no elements to be selected
    if (!elem) return;
    // Get the old selected element (if any)
    const prevElem = document.querySelector('.selected');
    if (prevElem) {
        // If there was a previously selected element, it isn't anymore
        prevElem.classList.remove('selected');
    }
    // Make the new element selected
    elem.classList.add('selected');
}
</script>

但没有运气。

我再次尝试了 document.querySelector(target);和 document.querySelector('#target');

我很确定我的

非常感谢任何帮助。

Answer 1

这最终满足了我的需要，模块 default.php 中的一个简短脚本

<script>
        jQuery('.target').click(function(){
                var id = jQuery(this).attr('id');
                jQuery('body').find('.selected').removeClass('selected');
                jQuery('#target'+id).addClass('selected');
        });
</script>