質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • JavaScript

    17083questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9328questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6954questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    6043questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

urlにパラメータ付加後、htmlを書き換える動きがうまくいきません

解決済

回答 4

投稿

  • 評価
  • クリップ 1
  • VIEW 6,022

perorist_ou

score 6

前提・実現したいこと

ここに質問したいことを詳細に書いてください

下記のコードでaタクをクリックした時、morebtクラスのidを取得し、locationでurlにパラメータを追加→
if文でパラメータがあることを確認されたら、下記のコードのよう、htmlを書き換える動きを実装したいのですが、
なぜかパラメータが追加された後に、htmlが元の状態に戻ってしまいます…
コードの実行順の問題かとも思い、
先にhtmlを書き換え、パラメータを追加する方法や
その逆の方法も試したのですが、どちらもhtmlが元に戻るだけでした…
一瞬だけhtmlが変わることからコード自体は順番通り実行されているようですが、
なぜか最後に元の状態に戻ってしまいます…

《参考サイト》
http://imas-cinderella.com/news/
http://www.hai-furi.com/news/

のように、各記事をクリックしたらurlの後ろにパラメータを付けたいのですが
これがなかなか上手くいきません…

お手数ですが、ご回答の程、
何卒宜しくお願い致します。

発生している問題・エラーメッセージ

エラーメッセージは出ていませんが、urlにパラメータを与えた後、一瞬下記のコード通りにhtmlが変わりますが、
また最初のhtmlの状態に戻ってしまいます…

該当のソースコード

$(document).ready( function(){

    $("a.morebt").click(function(e){
        e.preventDefault();
        var id = $(this).attr("id");
        var url = location.href;
        var pair=document.location.search;
        window.location.search = '?article_id=' + id;

        if( pair.length !== null ){
            var html = "";
        var category = $(this).parent().parent().parent().find(".news_category").text();
        var title = $(this).parent().parent().parent().find(".news_title_text").text();
        var texts = $(this).parent().parent().parent().find(".news_text").text();
        var imgArray = [];
        var thumb = $(this).parent().parent().parent().find(".news_thumb img").each(function(){
               text = $(this).attr("src");
               imgArray.push(text)});
        $("#allwrap").addClass("detail");
        $(".news_box").css({"display": "none"});
        html += '<div class ="news__detail_box mode_detail">';
        html += '<div class="news__detail_title cf">';
        html += '<div class="news__detail_category"><p>' + category + '</p></div>';
        html += '<div class="news__detail_title_text"><p>' + title + '</p></div>';
        html += '</div>';
        html += '<div class="news__detail_thumb">';
        html += '<img src="' + imgArray[0] + '">';
        html += '</div>';
        html += '<div class="news__detail_text"><p>' + texts + '</p></div>';
        html += '<div class="news__detail_share">';
        html += '</div>';
        html += '<div class="news__detail_nav">';
        html += '</div>';
        html += '</div>';
        $("#news").html(html);    
        }                

    });

});

試したこと

上記で述べたよう、コードの読み込み順番を変えるなどは
試してみましたがダメでした…

補足情報(言語/FW/ツール等のバージョンなど)

html / css / javascript / jquery dw cs6

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 4

+3

【window.location - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/location

window.location を書き換えるとその時点で画面遷移が起こります。
History API を使えば希望されている動作に近づくと思います。

【javascriptを使ったSEO対策まとめ - Qiita】
http://qiita.com/ykyk1218/items/78ed3bce0371a4ee219c

【Manipulating the browser history - Web developer guide | MDN】
https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history

【HTML5 History APIで非同期通信時にURLを変更する方法 | 株式会社LIG】
http://liginc.co.jp/web/js/other-js/162559

【History APIとスマホブラウザでのハマりどころ - Qiita】
http://qiita.com/nenokido2000/items/2dd8da77d06837c8a510

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+1

多分やろうとしてらっしゃることはJavaScriptでやることではありません。
他の回答者さんもおっしゃっている通り、クエリ文字列を渡すとサーバーへのリクエストが発生します。(要するにページが再読込されます)
参考に挙げられているサイトはどちらもサーバーサイドスクリプトを使用しています。(JavaScriptはクライアントサイドスクリプト)

参考に加えておくと
参考のサイトで言えば、?p=2 は
「2ページ目にあたるデータを返せ」とサーバーへリクエスト
→データベースからそのデータを取得
→htmlを生成
※ポイントは動的ページではあるものの、一時的なものではない。検索エンジンからもOK。
JavaScriptで動的に生成する場合、基本「一時的なページ」になり、検索エンジンにもキャッシュされません。(※例外あり)


そもそもクエリ文字列(回答者さんのおっしゃっている「パラメータ」)とは
WebブラウザなどがWebサーバに送信するデータをURLの末尾に特定の形式で表記したものです。

JavaScriptで何かをする為のものというよりは、クエリに渡した値をサーバーへリクエストとして送り
それに対し、予めサーバーサイドスクリプトで定義されているレスポンス(Ex. ページ内容の変更、データベースから特定のデータのみを抽出しHtmlを生成…など)を返すためものです。

 どうしてもJavaScriptのみで作成したいのなら

『URLに何らかの文字列を付与した上でhtmlの書き換え』(= 動的に一時的なHtmlページを作成したい)
場合、location.hashを利用した「ハッシュ(#)」 or 「ハッシュバン(#!)(※非推奨になってたような気がします)」
を使うのが妥当かなと思います。
(質問内容から推測するに、MVCみたいなものをつくりたい、という訳でもなさそうなので)

あるいは(あんまり意味はないのですが)
『ページロード時にページにクエリ文字列がある状態ではhtmlを書き換える』という処理にする

$(document).ready( function(){
var pair = window.location.search;

// !== null は常にtrueと評価されるので条件として使用するものではありません
// クエリ文字列が無い場合は空文字列(「''」)が入っていると判断され、nullではありません
if( pair === '?article_id=1'){
  //クエリがarticle_id=1の時のhtmlなど
}else if( pair === '?article_id=2'){
  //クエリがarticle_id=2の時のhtmlなど
}

    $("a.morebt").click(function(e){
        //クリックイベントはクエリ文字列の追加だけにする(これで勝手にページ遷移するので)
        e.preventDefault();
        var id = $(this).attr("id");
        window.location.search = '?article_id=' + id;
    });
});
  1. .click()内のif文をまるまる$(document).ready(function(){}直下へ移動(if文がページロード時に実行されるように)
  2. クリックイベントはクエリの書き換えのみに

とすれば、一応は「URLにはクエリ文字列が入り、ページ内容がそれに応じた形状になる」ようにはなります。

※繰り返しますが、これをJavaScriptで行うメリットはありません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

window.location.search = '?article_id=' + id;

上記コードの実行により再読み込みが行われてるのではないかと思います。

回避する方法はいくつかあると思いますが、if文の中身をごっそりと
ページロード時の処理に移動し、「もしurlに'article_id='という文字列が入っていたら」
などの条件を追加するなどが一番簡単な気がします。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

window.location.searchの動きはhttps://developer.mozilla.org/ja/docs/Web/API/Window/locationを参照ください。
代入した値がサーバに送られ、再読み込みされるまでの一瞬だけjs側の処理が進みリロードされる、という流れになっています。

例えば
http://hogehoge.com/?article_id=1
で受け取れるようサーバー側に処理を追加してあげればよいかと思います。

参考にされている2つのサイトともページリロードが走っているので、なにもクライアント側でhtmlの書き換えだけを行っているわけではないと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

関連した質問

同じタグがついた質問を見る

  • JavaScript

    17083questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9328questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • jQuery

    6954questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • CSS

    6043questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。