我正在使用 php 会话变量来保留页面状态,如下例所示,它是为了维护元素已被单击并接收新类的事实。如果再次单击该类,则会稍后将其删除。
但是,我还设置了一个全局变量,以便我的客户端“知道”状态并执行一些其他代码,这些代码会影响页面上其他地方的其他元素(突出显示它们)。此代码使用单击元素的“this”来了解如何突出显示其他元素。<==== 这是重要的一点。
$("listRow").click(function(){
if (globalVariable == "someClass")
{
// clean global
globalVariable = " ";
/* call a server side script via ajax to unset php session variable */
}else{
/* call a server side script via ajax to create a php session variable, later used on page refresh to retain page state*/
// also set a global js variable for use elsewhere
globalVariable = "someClass";
};
$(this).toggleClass(".someClass");
// alot of code to do something to other elements on the page using some data that is specifically available in this element
});
现在想象一下这种正常情况:
用户单击 listRow 触发代码。//到目前为止一切都很好
用户刷新页面:listRow 获得了它需要的类但是......其他元素都没有被突出显示。发生这种情况是因为
listRow
没有被点击,我明白了。
所以我想做的是创建一个小函数,其中包含突出显示其他页面元素的代码。
我有许多先决条件:包括全局变量在内的所有 javascript 都包含在外部 js 文件中。不允许将原始 js 放入标记中。即限制是我不能在 中声明一个全局变量,然后使用 php 从会话变量中填充它。
我认为我可以通过执行以下操作来确定该项目已受 php 影响的事实。我说我认为是因为我不确定这是否是在问“listRow 中是否有任何元素......”或者表达式是否可以以某种方式识别特定元素的问题。
function mySelfStarter()
{
if ($("listRow").hasClass("someClass"))
{
// some code
};
};
我知道我可以简单地使函数在文档加载中的某个地方像这样在刷新时执行:
mySelfStarter();
我想要做的是找到具有类的元素,someClass
然后找到 id,然后使用这个 id 来设置全局变量和其他不相关元素的突出显示。这一切都必须是客户端代码。
就像是:
if ($("listRow").hasClass("someClass"))
{
// find the element that has the class "someclass"
// get the id of this element
// do something with id
};
点击前新服务的页面
<div id="listWrapper" class="wrapper">
<div id="value1" class="listRow"></div>
<div id="value2" class="listRow"></div>
<div id="value3" class="listRow"></div>
<div id="value4" class="listRow"></div>
</div>
点击后
<div id="listWrapper" class="wrapper">
<div id="value1" class="listRow"></div>
<div id="value2" class="listRow someClass"></div>
<div id="value3" class="listRow"></div>
<div id="value4" class="listRow"></div>
</div>
页面刷新后
<div id="listWrapper" class="wrapper">
<div id="value1" class="listRow"></div>
<div id="value2" class="listRow someClass"></div>
<div id="value3" class="listRow"></div>
<div id="value4" class="listRow"></div>
</div>