初めまして。 早速ですが、タイトル通り、更新頻度が多いサイトを制作しており、
その際に新着情報などを一覧できるページを作成、
それぞれをクリックした時に、urlに?で始まるパラメータを付け、
その後htmlの書き換えを実装しようとしております。
###前提・実現したいこと
同じhtmlの中で、ナビのヘッダーなどは更新されず、
中身のところだけ更新されるようにしたいです。
その際、urlの最後の"?article_id=~~~"などをつけ、
同じhtml内でありながら、独立したようにし、それぞれtwitterボタンなどで拡散されるようにしたいです。
仕組みとしては下記のURLのサイトを参考に、同じ仕組みにしたいです。
http://imas-cinderella.com/news/
まさかとは思いますが、記事ごとにhtmlを作らないといけないのでしょうか…
###発生している問題・エラーメッセージ
ある要素(ここではli.more_bt)をクリックすると、親要素である#newsに".detail"をつけ、 新着情報一覧にある要素から各要素(テキストや画像)を取得、 html自体を書き換えることによって、それぞれの新着情報の詳細を表示しようとする動きです。 この際にurlの後ろに”?article_id= + aのid”のパラメータをつける仕組みです。 しかし、urlの後ろにパラメータを付けると、htmlが更新(?)されてしまい、 下記のコードで書き換えたhtmlではなく、最初のhtmlに戻ってしまいます…
###該当のソースコード
(function(){ $(function() { var News = new window.News(); }); window.News = ( function(){ function News(){ this.init(); }; //メソッド収納 News.prototype.init = function(){ this.changeLayout(); }; //詳細表示 News.prototype.changeLayout = function(){ var self = this; var html = ""; $("li.more_bt").each( function(){ $(this).on("click", function(){ $("#news").addClass("detail"); var texts = $(".news_text").text(); var category = $(".news_category").text(); var title = $(".news_title_text").text(); var imgArray = []; var thumb = $('.news_thumb img').each(function(str){text = $(this).attr("src"); imgArray.push(text);}); $(".news_box").remove(); 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); }); }); }; //url変更、パラメータ渡し News.prototype.changeUrl = function(){ var params = getParameter(); var id = $(this).parent().attr("id"); //id取得 var array = []; params['article_id'] = id; window.location.href = setParameter(params); //パラメータを設定したURLを返す function setParameter( paramsArray ){ var resurl = location.href.replace(/\?.*$/,""); for ( key in paramsArray ){ resurl += (resurl.indexOf('?') == -1) ? '?':'&'; resurl += key + '=' + paramsArray[key]; }; return resurl; }; //パラメータを取得する function getParameter(){ var paramsArray = []; var url = location.href; parameters = url.split("#"); if( parameters.length > 1 ) { url = parameters[0]; } parameters = url.split("?"); if( parameters.length > 1 ) { var params = parameters[1].split("&"); for ( i = 0; i < params.length; i++ ) { var paramItem = params[i].split("="); paramsArray[paramItem[0]] = paramItem[1]; } } return paramsArray; }; };//changeUrl return News; }());//newslist }());
###試したこと
ajaxを使い、飲みこみたいurl(htmlファイル)を指定、望んでいる箇所にデータを書き込むコードも試したのですが、
この場合だと、記事ごとにhtmlファイルを作らないといけなく、かつhtmlのファイル名も規則的に作らないといけないため、
多分別の方法があるのではないかと…
###補足情報(言語/FW/ツール等のバージョンなど)
正式に勉強したことはなく、ネット上で探した情報を元に作っております…
主な言語としてはjavascript, jquery, html, cssなどです。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。