0

以下の例のように、ページの状態を保持するために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>
4

1 に答える 1

0

私がフォローしているかどうかはわかりませんが、phpセッションで状態を保存している場合は、ページをレンダリングする前にそれを確認できます。セッションが要素がクリックされたと言っている場合は、トリガーする小さなjsスクリプトもレンダリングします要素のクリック イベント。そうすれば、あたかもユーザーが要素をクリックしたかのように、必要なすべての副作用を得ることができます。

次のような方法でクリック イベントをトリガーできます。

 $("#element").trigger("click");

最終的な解決策で編集する

これはどう：

 $("listRow.someClass").each(function(){ 
    // - this: Is the element with the class 
    // - $(this).attr("id"): Is the ID of that element
    // do something with id 
  });

今はどう？ところで、「listRow」というタグを探すように JQuery に指示しているので、$("listRow") を実行してもおそらく何も見つからないでしょう。または「#」がありますか？

于 2011-09-22T14:28:19.113 に答える