3

ユーザーが最初のページからリンクをクリックしたときに、まだ開いていない別のページを変更できるかどうか疑問に思いました。説明するのは難しいですが、以下の例で私が何を意味するのかをお見せしようと思います。

htmlは実際のサイトではより複雑ですが、ここに骨抜きにされたバージョンがあります：

索引：

<head>
<script type="text/javascript" src="external.js"></script>
</head>

<body>
<div id="container">
    <div class="img">
   <a href="PRODUCTPAGE.html">
   <img src="product.jpg"/> </a>
</div>

<div class="img">
   <a href="PRODUCTPAGE.html">
   <img src="product2.jpg"/></a>        
</div>
</body>

製品ページ：

<head>
<script type="text/javascript" src="external.js"></script>
</head>


<body>
<div id="container">

<div id = "product1">
  all of product 1 info and pictures
</div>

<div id = "product2">
  all of product 2 info and pictures
</div>

つまり、基本的に、製品1の画像をクリックして製品ページに製品1の情報のみを表示し、製品2をクリックすると、ページに製品2の情報のみを表示する場合、JavaScriptを使用するだけで、PHPなどは使用できません。似たようなものを探していたのですが、まだ見つけていないので、できないかもしれないと思いましたが、お願いしたいと思いました。

私はそれを理解することができなかったので、私のjavascriptドキュメントには多くが含まれていませんが、私はそれらの表示をなしにすることを試みてきました。私の言いたいことを知っているなら、次のページに進むための変数を取得できませんでした。申し訳ありませんが、私はJavascriptの基本的な知識しか持っていません。

4

3 に答える 3

2

あなたが探しているテクニックは、DHTML（ダイナミックHTML）とAJAX（非同期JavaScriptとXML）の組み合わせです。

DHTML：

DHTMLの背後にある考え方は、ユーザーがサーバーにHTMLページを要求すると、サーバーはそのページと、ユーザーが製品画像をクリックするなどの特定のアクションを実行する場合に必要となる可能性のあるその他のデータで応答するというものです。

サーバーが最初のページロード時にHTMLページに返すデータは、通常、デフォルトで非表示になっています。たとえば、ページのDOMが読み込まれますが、要素にstyle = "display：none"が含まれている場合があります。

ユーザーが特定のアクションを開始すると、ページはJavaScriptを使用して、非表示になっている可能性のある要素だけでなく、表示されているページ上の要素を操作します。

次のページを検討してください。

<body>
  <div id="page1">
    <div id="container">
        <div class="img">
           <a id="product1" onclick="showProduct1();" href="#">
           <img src="product.jpg"/> </a>
        </div>

        <div class="img">
           <a id="product2" onclick="showProduct2();" href="#">
           <img src="product.jpg"/> </a>
        </div>
    </div>
  </div>

  <div id="page2" style="display:none">
      <div id="product_page_wrapper">
          <a href="#" onclick="backToCategories()">back to Product Categories</a>
          <div id="productDetails">
              <div id="prod1">
                 ...
                 ...
               </div>
               <div id="prod2">
                 ... 
                 ...
               </div>
          </div
       </div>
  </div>
</body>

上記のページは2つのセクションに分かれており、1つはid = "page1"で、もう1つはid="page2"です。デフォルトでは、ページ2を非表示にします。

ユーザーが製品のリンクをクリックすると、ページ1が非表示になり、ページ2が表示されます。

document.getElementById("page1").setAttribute("style","display:none");
document.getElementById("page2").setAttribute("style","display:block");

さらに、クリックされたリンクに応じて、クリックされた製品の製品の詳細を再表示し、クリックされなかった製品の詳細を非表示にします。たとえば、商品1をクリックすると、商品1が表示されます。

document.getElementById("prod2").setAttribute("style","display:none");
document.getElementById("prod1").setAttribute("style","display:block");

最終的には、page2divのみが表示されます。ユーザーが[商品カテゴリに戻る]リンクをクリックすると、プロセスが逆になり、page2が非表示になり、page1が表示されます。

要約すると、このタイプの操作は、@ Marcelが指摘しているように、PHPやサーバー側のコードを使用せずに、HTML、JavaScript、CSSを使用するだけで、クライアント側で完全に実行できます。ただし、純粋なDHTMLの使用は、実用的なソリューションというよりも学術的な演習です。サーバー側は、顧客データ、製品データ、およびプロの収益を生み出す製品に必要なすべてのものを維持するためです。

AJAX：

一方、AJAXはDHTMLと非常によく似ており、DHTMLの拡張と見なされることもあります。AJAXの背後にある考え方は、ユーザーがアクションを開始すると、ページがサーバーにデータを要求するというものです。サーバーが応答すると、データはコールバック関数に渡され、コールバック関数はデータを使用してページを操作します。

特定の例では、DHTMLとAJAXの両方を組み合わせて使用​​して、目的の効果を引き出すことができます。次のページを検討してください。このページでは、AJAXを使用して、ユーザーが選択した製品に関連するHTMLを取得しています。

<head>
<script type="text/javascript" src="external.js"></script>

<script>

  function makeRequest(url) {
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
      httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
      } 
      catch (e) {
        try {
          httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } 
        catch (e) {}
      }
    }

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    httpRequest.onreadystatechange = displayContents;
    httpRequest.open('GET', url);
    httpRequest.send();
  }

  function displayContents() {
    if (httpRequest.readyState === 4) {
      if (httpRequest.status === 200) {
        //alert(httpRequest.responseText);
        document.getElementById("container").innerHTML = httpRequest.responseText;
    } else {
      alert('There was a problem with the request.');
    }
  }


</script>
</head>

<body>

    <div id="container">
        <div class="img">
           <a id="product1" onclick="makeRequest('/getproduct?id=1')" href="#">
           <img src="product.jpg"/> </a>
        </div>

        <div class="img">
           <a id="product2" href="#" onclick="makeRequest('/getproduct?id=2')">
           <img src="product2.jpg"/></a>        
        </div>
    </div>
</body>

上記の例では、ユーザーが製品のリンクをクリックすると、サーバーはページのdiv＃container部分を十分に置き換えるのに十分なHTMLで応答します。

<span id="product">
    <p>Product Name 1</p>
    <p>Product details...</p>
</span>

これはページに挿入されるため、DOMは次のようになります。

<body>

    <div id="container">
        <span id="product">
            <p>Product Name 1</p>
            <p>Product details...</p>
        </span>
    </div>

</body>

概要：

この質問にはjQueryではなくJavaScriptのタグが付けられているため、回答はJavaScriptに焦点を当てていますが、DHTMLセクションで説明されている手法は多くのJavaScriptライブラリで利用されています。たとえば、説明する手法のデモについては、jQueryMobileのマルチページテンプレートを参照してください。

于 2012-05-27T01:32:50.153 に答える
0

リンクを変更してパラメータを追加できます。このようにして、PRODUCTPAGE.htmlはクリックしたリンクを認識します。

   <a href="PRODUCTPAGE.html?product1"><img src="product1.jpg"/></a>

   <a href="PRODUCTPAGE.html?product2"><img src="product2.jpg"/></a>

PRODUCTPAGE.html内では、JavaScriptを使用してURLを解析し、特定の製品のデータのみを表示できます。

于 2012-05-27T01:22:09.733 に答える
0

はい、javascriptを介してDOMのさまざまな部分を表示および非表示にすることができます。

何をする必要があるかについては、このトグルの例を確認してください。

于 2012-05-27T01:22:50.340 に答える