jQueryでソート機能をつけた、結果をURLで作りたい

Question

ソートした結果のURLを作りたい。
contents.htmlでソート機能は、付いたが、別ページのリンクボタンで、contents.htmlにソート結果に飛ぶようにしたい。

例えば、[bule]でソートしたら、contents.html＃bule
のように、できないかと。ソートした結果を、IDを付加するような感じで、個別でURLを作りたい。

実現したいことは、
blue_contents.html（詳細用ページ）から、リンクでcontents.html（リストページ）に飛んだ時に、
contents.htmlでリンクを作成して、contents.html（リストページ）へのリンクを貼りたい。
その時、ソートした結果のbuleを表示したい。

『contentshtml＃bule』のようにできたら、詳細用ページのナビからリンクを貼るだけで可能になる。
もしくは、違う方法でも、やりたいことは、ナビは同じレイアウトで、
詳細ページ内のリンクから、リストページにソート結果を出したい。

//contents.html
（リストページ）

<div class="wrap">
		<ul class="nav">
				<li class="btnall">all</li>
				<li class="btngreen">green</li>
				<li class="btnblue">blue</li>
				<li class="btnred">red</li>
				</ul>
	<section class="contents">
				<div class="contents">
		          <div class="contents__list">
			  <arcticle class="contents--item green">
              <a href="#">
				  <div class="contents_imgwrap"><div class="contents__img">
					<img src="a.jpg" alt=""/>
                </div></div>
				  <div class="txt">
					  テキスト_green
				  </div>                               
                        </a>
            </arcticle>
					 <arcticle class="contents--item blue">
              <a href="#">
				  <div class="contents_imgwrap"><div class="contents__img">
					<img src="a.jpg" alt=""/>
                </div></div>
				  <div class="txt">
					  テキスト_blue（1個目）
				  </div>                               
                        </a>
            </arcticle> 			  
				<arcticle class="contents--item red">
              <a href="#">
				  <div class="contents_imgwrap"><div class="contents__img">
					<img src="a.jpg" alt=""/>
                </div></div>
				  <div class="txt">
					  テキスト_red
				  </div>                               
                        </a>
            </arcticle>
					 <arcticle class="contents--item green">
              <a href="#">
				  <div class="contents_imgwrap"><div class="contents__img">
					<img src="a.jpg" alt=""/>
                </div></div>
				  <div class="txt">
					  テキスト_green
				  </div>                               
                        </a>
            </arcticle>
					 <arcticle class="contents--item blue">
              <a href="#">
				  <div class="contents_imgwrap"><div class="contents__img">
					<img src="a.jpg" alt=""/>
                </div></div>
				  <div class="txt">
					  テキスト_blue
				  </div>                               
                        </a>
            </arcticle> 			  
				<arcticle class="contents--item red">
              <a href="#">
				  <div class="contents_imgwrap"><div class="contents__img">
					<img src="a.jpg" alt=""/>
                </div></div>
				  <div class="txt">
					  テキスト_red
				  </div>                               
                        </a>
            </arcticle> 
					  
					  
					  	 </div>
           			</div>
				</section></div>

<script>$(function(){
  $('.nav li').each(function(){
    $(this).click(function(){
      var btnName = $(this).attr("class").substring(3).toLowerCase();
      var className = '.';
      className += btnName;
      if(btnName == 'all') {
        $('.contents__list > arcticle').fadeIn(200);
      } else {
        $('.contents__list arcticle:not(className)').hide();
        $(className).fadeIn(200);
      }
    });
  });
});</script>

//contents/blue_contents.html
詳細用ページ（ナビは、見た目は、contents.html（リストページ）のナビと同じで良い。）
<div class="wrap">
		<ul class="nav">
				<li class="btnall">all</li>
				<li class="btngreen">green</li>
				<li class="btnblue"><a href="#">ここにblue_contentsの詳細blueに飛びたい</a></li> //ここをクリックしたら、リストページのblueのソート結果にしたい。
				<li class="btnred">red</li>
				</ul>
	<section class="blue_contents">
				<div>blue_contentsの1個目の詳細</div>
				</section></div>

//ここからCCS//
<style>
		
		.wrap{
			width: 100%;
			margin: 0;
			padding: 0;
			display: flex;
				}		
	.nav{
		width: 30%;
  overflow: hidden;
  padding: 10px;
		list-style: none;
	background-color:pink;
}
.nav li {
   padding: 10px 0;
  cursor: pointer;
 }


.contents {
	width: 1000px;
  position: relative;
  height: auto;
  margin: 0 auto;
	padding: 10px;
	background-color: aquamarine;
	}

.contents__list {
  height: auto;
  margin: 0 auto;
  padding: 0;
	display: flex;
	flex-wrap: wrap;
	}


.contents--item{
	
	background-color: #fff;
	width: calc(100%/3) ; 
	min-width: 200px;
	color: #000;
}


.contents_imgwrap{
	width: 100%;
	display: flex;
	justify-content: center;
  align-items: center;
}

.contents__img{
	width: 100%;
	 display: block;
  overflow: hidden;
}
	</style>

//ここからHTML//
<div class="wrap">
		<ul class="nav">
				<li class="btnall">all</li>
				<li class="btngreen">green</li>
				<li class="btnblue">blue</li>
				<li class="btnred">red</li>
				</ul>
	<section class="contents">
				<div class="contents">
		          <div class="contents__list">
			  <arcticle class="contents--item green">
              <a href="#">
				  <div class="contents_imgwrap"><div class="contents__img">
					<img src="a.jpg" alt=""/>
                </div></div>
				  <div class="txt">
					  テキスト_green
				  </div>                               
                        </a>
            </arcticle>
					 <arcticle class="contents--item blue">
              <a href="#">
				  <div class="contents_imgwrap"><div class="contents__img">
					<img src="a.jpg" alt=""/>
                </div></div>
				  <div class="txt">
					  テキスト_blue
				  </div>                               
                        </a>
            </arcticle> 			  
				<arcticle class="contents--item red">
              <a href="#">
				  <div class="contents_imgwrap"><div class="contents__img">
					<img src="a.jpg" alt=""/>
                </div></div>
				  <div class="txt">
					  テキスト_red
				  </div>                               
                        </a>
            </arcticle>
					 <arcticle class="contents--item green">
              <a href="#">
				  <div class="contents_imgwrap"><div class="contents__img">
					<img src="a.jpg" alt=""/>
                </div></div>
				  <div class="txt">
					  テキスト_green
				  </div>                               
                        </a>
            </arcticle>
					 <arcticle class="contents--item blue">
              <a href="#">
				  <div class="contents_imgwrap"><div class="contents__img">
					<img src="a.jpg" alt=""/>
                </div></div>
				  <div class="txt">
					  テキスト_blue
				  </div>                               
                        </a>
            </arcticle> 			  
				<arcticle class="contents--item red">
              <a href="#">
				  <div class="contents_imgwrap"><div class="contents__img">
					<img src="a.jpg" alt=""/>
                </div></div>
				  <div class="txt">
					  テキスト_red
				  </div>                               
                        </a>
            </arcticle> 
					  
					  
					  	 </div>
           			</div>
				</section></div>

//ここからscript//
<script>$(function(){
  $('.nav li').each(function(){
    $(this).click(function(){
      var btnName = $(this).attr("class").substring(3).toLowerCase();
      var className = '.';
      className += btnName;
      if(btnName == 'all') {
        $('.contents__list > arcticle').fadeIn(200);
	      } else {
        $('.contents__list arcticle:not(className)').hide();
        $(className).fadeIn(200);
      }
    });
  });
});</script>

Answer 1

location.hash で取得するのがいいかと思います。ハッシュ記号の除去をお忘れなく。
location.hash－JavaScriptリファレンス

Comments

[monmon_888]

遅くなりまして誠に申し訳ございません。ありがとうございます。
location.hash について調べてみましたが、私の能力では、全く出来ませんでした。
location.hash で、greenの時と、allの時で、違うURLになっているのでしょうか？？？さっぱりだめでした。

[Lhankor_Mhy]

リンクのURLは手書きで静的に書くのだと思っていたのですが、違うのでしょうか？
自動的に動的で書きたいということでしたら、その条件をご提示いただきたいです。

[Lhankor_Mhy]

とりあえず、location.hash を使ったコードがないと、これ以上の助言は的外れになってしまいそうです。

[monmon_888]

Lhankor_Mhy様、誠にありがとうございます。はい。静的に取得したいと思いますが、できてません。以下のようにすると、ハッシュは付与できるものの、、、ボタンをクリックした時だけなので、意味がなさそうです。。。

<script>
$('.btnall').click(function() {
window.location.hash='all';
});
$('.btngreen').click(function() {
window.location.hash='green';
});
$('.btnblue').click(function() {
window.location.hash='blue';
});
$('.btnred').click(function() {
window.location.hash='red';
});
</script>

[Lhankor_Mhy]

contents.html#bule
というURLで表示されたら、bule でフィルタされたように表示したい。

というご質問だと読んだのですが、違いましたか？

[monmon_888]

はい、その通りです。出来ないのです。全く。

[monmon_888]

contents.html#bule
というURLは、別ページ「contents/blue_contents.html」内にリンクとして付けたいです。

「contents.html」のページはボタンを押したら、blueが表示されるので、これでOKです。
「contents.html」のページの『blue』のボタンを押した状態をURLにしたいのですが、どうにもわからずです。

[Lhankor_Mhy]

お悩みのことが今ひとつよくわからないです。
静的にURLを書くのであれば、<a href="contents.html#bule"> とすればいいだけではないかと思います。

問題はそちらではなくて、contents.html#bule でページが開かれた時に bule でフィルタするような機能を contents.html に仕込む、という部分だと思うのですが、ご質問を読み間違っていますでしょうか？

[monmon_888]

お世話になります。はい、その通りです。
クリックした時ではダメだということは分かるのですが、こちらをどのようにすれば良いのか？どん詰まりでございます。

[Lhankor_Mhy]

blue をフィルタした時には、変数 btnName には "blue" が入るようになっていますよね？
contents.html#blue にアクセスした時には、location.hash には "#blue" が入っていることはご理解されましたか？

ご理解されているのであれば、後は文字列操作だけだと思うのですが、ご不明の点はどういうところでしょうか？

[monmon_888]

＞blue をフィルタした時には、変数 btnName には "blue" が入るようになっていますよね？
なっていますか？なっていないのかと思うのですが？

＞contents.html#blue にアクセスした時には、location.hash には "#blue" が入っていることはご理解されましたか？

残念ながらわからないです。
contents.html#blueを所得できていません。

[Lhankor_Mhy]

> なっていますか？なっていないのかと思うのですが？

なるほど、monmon_888 さんとのコミュニケーションが上手くいかない理由がようやくわかりました。

当方でご提示のコードを試してみたところ、『blue をフィルタした時には、変数 btnName には "blue" が入るように』なっていましたので、monmon_888 さんはご提示いただいたコードとは別のコードで試されているようです。

お互いに別のコードを見ている状態ですと、問題を解決するどころか、問題を共有することさえ難しいかと思います。
問題が再現するコードをご提示いただけますか？

[monmon_888]

Lhankor_Mhy様、無能な私で申し訳ございません。（涙）

上記のコードで間違いございませんが、この状態で、location.hash での取得の仕方がよくわからないですが。

[Lhankor_Mhy]

わかりにくいようで申し訳ないです。

こちらの回答は、『blue をフィルタした時には、変数 btnName には "blue" が入る』ことを前提としていましたので、そうでないならば考え直しをしなくてはならず、そのためには現状のコードを把握する必要があります。

ですので、ひとまず、現状のコードをいただきたい旨を申し上げた次第です。

[monmon_888]

承知しました。お待ちください。

[monmon_888]

一番下に記入したのが、全てになります。

[Lhankor_Mhy]

ありがとうございます。拝読しました。

ですが、当方で試したところ、こちらでも『blue をフィルタした時には、変数 btnName には "blue" が入る』形になっていました。
「そのようになっていない」と感じられたのは、どのような理由によるものでしょうか？

[monmon_888]

申し訳ないです。ただただ感謝します。
<script>
$('.btnblue').click(function() {
alert(location.hash);
});

</script>
としてみても、特に#blueが出てこないためです。

[Lhankor_Mhy]

変数 btnName とはこの行のことです。

var btnName = $(this).attr("class").substring(3).toLowerCase();

とりあえず、変数 btnName の問題は存在しないということでいいですか？

[monmon_888]

location.hash　自体、わかっていないので、取得の仕方もわからないのですが。

[monmon_888]

ボタンに付与されている名前と同じclassであればいいという認識しかないのですが？

[monmon_888]

小文字だからですか？

[Lhankor_Mhy]

location.hash は、
contents.html#blue の時に "#blue" となります。
contents.html の時には "" となります。

contents.html#blue に移動してテストしてみてください。

[monmon_888]

お手数かけます。
ファイル名が、test/contents.htmlですが、
test/contents.html#blue を開いても、全てが表示され、contents.html =contents.html#blue になってます。
何もしていない状態です。
location.hashをどのように記入すれば、そのようになるのでしょうか？

[Lhankor_Mhy]

location.hash が "#blue" になることは確認できましたでしょうか。

[monmon_888]

お手数ですが、確認の仕方を教えていただけないでしょうか？

[Lhankor_Mhy]

ご提示いただいた、以下のコードでいいと思います。

<script>
$('.btnblue').click(function() {
alert(location.hash);
});

</script>

[monmon_888]

以上のコードでは『file://』しか出てきません。
仮にサーバーに載せても、ドメイン名（***.com)としか出てこないのです。

[Lhankor_Mhy]

location.host と誤記していたりしませんか？

[monmon_888]

上記コードをコピペしてみましたが、同じです。

[Lhankor_Mhy]

やはり hash を host と誤記しているではないかと思うのですが、そうではないとすると原因はわかりません。

[monmon_888]

jquery読み込んだ後、

<script>
$(function(){
$('.nav li').each(function(){
$(this).click(function(){
var btnName = $(this).attr("class").substring(3).toLowerCase();
var className = '.';
className += btnName;
if(btnName == 'all') {
$('.contents__list > arcticle').fadeIn(200);
} else {
$('.contents__list arcticle:not(className)').hide();
$(className).fadeIn(200);
}
});
});
});</script>
<script>
$('.btnblue').click(function() {
alert(location.hash);
});
</script>

[monmon_888]

ブラウザによって違いますが、safariは空欄。chrome、operaはこのページの内容とbtnblueをクリック時に出てきます。

[Lhankor_Mhy]

当方では #blue とアラートされます。
（contents.html#blue の場合）

[monmon_888]

全部コピペしたので、全く同じですよねぇ。
これが取得できていた場合は、何もせずに、ただ、「contents.html#blue」をリンクに指定するだけってことですよね？

ちなみに、これを取得できなかった場合は、blueをボタンを押さなくても押した状態で付与する事が出来るのでしょうか？

[Lhankor_Mhy]

> これが取得できていた場合は、何もせずに、ただ、「contents.html#blue」をリンクに指定するだけってことですよね？

そうではないです。これを元にフィルタをしなくてはいけないです。

---

> これを取得できなかった場合は、blueをボタンを押さなくても押した状態で付与する事が出来るのでしょうか？

他にも方法はあると思いますが、location.hash が取れないのであれば他の方法もまともに動かないのではないかな、という気もします。

[Lhankor_Mhy]

<li class="btnall"><a id="all" href="#all">all</a></li>
<li class="btngreen"><a id="green" href="#green">green</a></li>
<li class="btnblue"><a id="blue" href="#blue">blue</a></li>
<li class="btnred"><a id="red" href="#red">red</a></li>
...
$(location.hash).click()
});
</script>

location.hash が取れるなら、こんな感じですかね。

[monmon_888]

「contents.html」に書くと、「contents.html#blue」になりました！
ただ、「blue_contents.html（詳細用ページ）」からボタンを押して「contents.html」に戻った時に、全部表示せずに、blueならcontents.html#blueを表示したいのですが、これだと出来ないですねぇ。

[Lhankor_Mhy]

location.hash が取れないのであれば、動かないでしょうね。
また、「戻る」ボタンなどで戻った時には、特別な処理が必要になります。

[monmon_888]

メールが届かなくなって、気づきませんでした。すみません。
ありがとうございます。色々難しいです。