자바 스크립트에서 변수 값을 기반으로 페이지를 다시로드 한 후 클래스 할당

Question

현재 Joomla 기반 웹 사이트를 새로 개발 중입니다. 제작 과정에서 두통을 일으키는 문제가 발생했습니다 :

사용자가 세 개의 링크 중 하나를 클릭하면 3 개의 모듈을 사용 또는 사용 중지해야합니다. 이론 상으로는 고유 한 ID가있는 세 개의 링크를 작성하고 자바 스크립트 코드의 짧은 코드를 작성한 다음 마지막으로 변수 값을 로컬 저장 영역에 저장하여 저장하므로 페이지를 다시로드 한 후에 선택한 옵션이 표시됩니다.

이것은 내가 지금까지 만든 것입니다 :

이

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> 

자바 스크립트 :

<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> 

문 자체가 작동/다른 경우 경우, 내가 전에이 테스트. 변수의 값을 변경해도 작동하지 않으므로 변경 사항을 로컬 저장 영역에 저장하지 않아도됩니다. 모두 모두 jQuery 문이 작동하지 않는 것 같습니다. Joomla는 달러 기호로 jQuery 명령을 인식하지 않기 때문에 달러 기호 대신 "jQuery"를 사용하고 있습니다. 내 코드의 실수는 무엇입니까?

미리 도움 주셔서 감사합니다.

Answer 1

@charlietfl 올바른 생각을 가지고 : 당신이 다시 정의하고 클릭 핸들러 안에 새로운 clickedclass 변수가 있습니다. 따라서 수정중인 것은 글로벌 변수가 아닌 새 변수입니다. 귀하의 성명에서 var을 제거하면 javascript는 더 높은 범위에서 동일한 이름을 가진 변수를 찾게됩니다. 이것은 원하는 것입니다.

달러 기호 "문제"에 관해서는 Joomla가 확실히 라이브러리 충돌을 피하기 위해 그런 식으로 행동합니다. 많은 도서관에서는이 $을 진입 점으로 사용하며, 각 라이브러리는이를 다시 정의하므로 여러 라이브러리가 서로 부러 질 수 있습니다. 이러한 이유 때문에 JQuery는 JQuery 개체 인 또 다른 진입 점을 제공합니다.

이

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

편집이 : 당신의 편집 후 , 당신의 classvar 변수가 정의되지 않습니다 당신이 어쨌든 $를 사용하려는 경우, 당신은 (당신이 가장 자주한다) 코드의이 비트와 코드의 범위를 제한 할 수 있습니다 , 그래서 그것을 w/e에 정의한 후 작동하지 않을 수 있습니다, 당신의 코드는 나를 위해 일하는 것 같다.

Answer 2

)합니다 (jQuery.click으로 변수의 값을 변경하면 당신이 jQuery(document).ready()에 클릭 이벤트를 포장 할 때 작동하는 경우에 당신은 시도 할 수 있습니다 :

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