Question

我目前正在开发一个新的基于Joomla的网站。在创作过程中，我偶然发现了一个令我头痛的问题：

我需要根据用户点击三个链接之一来启用或禁用三个模块。从理论上讲，一切看起来都很简单：创建三个具有唯一ID的链接，创建一小段javascript代码，最后保存将变量值保存到本地存储，以便在页面重新加载后显示所选的选项。

这是我到目前为止所创造的：

HTML：

<div class="wahl">
<ul style="list-style-type: none;">
<li><a id="no1" href="#">Option 1</a></li>
<li><a id="no2" href="#">Option 2</a></li>
<li><a id="no3" href="#">Option 3</a></li>
</div>

使用Javascript：

<script type="text/javascript">
var clickedclass = 0
clickedclass = localStorage.getItem(classvar)

jQuery(document).ready(function(){    
    jQuery('#no1').click(function() {
        localStorage.setItem(classvar, 1);
    });
});

if (clickedclass == 0)
{ document.write ("Variable is 0") }
else if (clickedclass == 1)
{
jQuery('#no1').addClass('active');
document.write ("Variable is 1")
}
else if (clickedclass == 2)
{ document.write ("Variable is 2") }
else if (clickedclass == 3)
{ document.write ("Variable is 3") }
</script>

if / else if语句本身有效，我之前测试过。更改变量的值不起作用，也不会将更改保存到本地存储。总而言之，似乎所有jQuery语句都不起作用。我使用“jQuery”而不是美元符号，因为Joomla不会识别带有美元符号的jQuery命令。我的代码中有什么错误？

提前感谢您的帮助！

Answer 1

当您将click事件包装到jQuery(document).ready()时，您可以尝试使用jQuery.click（）更改变量的值：

jQuery(document).ready(function(){    
    jQuery('#no1').click(function() {
      clickedclass = 1;
    });
});

Answer 2

@charlietfl有正确的想法：你正在重新定义点击处理程序中的新clickedclass变量，所以你要修改的是这个新变量而不是更全局变量。从语句中删除var将导致javascript在更高的范围内查找具有相同名称的变量，这就是您想要的。

至于你的美元符号“问题”，Joomla肯定会采取这种方式避免库冲突。许多图书馆使用这个$作为切入点，每个图书馆重新定义它，因此有几个库会使它们相互破坏。出于这个原因，JQuery为您提供了另一个入口点，即JQuery对象。如果你想使用$，那么你可以（而且你经常应该）用这段代码限制代码的范围：

(function($) {
    //your code here using $
})(jQuery);

修改编辑后，classvar变量未定义，因此无法使用，在将其定义为w / e之后，您的代码似乎对我有用。

基于Javascript中的变量值在页面重新加载后分配类

2 个答案: