jqueryでのリンク書き換え方法

###■やりたいこと
「href="#"」をその日付にふわわしいリンクに変えたいです。

（例）１月１日をクリック
➡「href="#"」が「href="http://example.com/itsu/0101"」になる。

（例）２月３日をクリック
➡「href="#"」が「href="http://example.com/itsu/0203"」になる。

###■ダメだったコード
▼実際の動作
https://jsfiddle.net/ccoc095c/

▼そのコード

html
1<div class="calendar-area">
2
3	<div class="calendar01-wrap">
4		<ul class="calendar-list 01"><p>1月</p>
5			<li class="calendar-day 01"><a href="#">1日</a></li>
6			<li class="calendar-day 02"><a href="#">2日</a></li>
7			<li class="calendar-day 03"><a href="#">3日</a></li>
8			<li class="calendar-day 04"><a href="#">4日</a></li>
9			<li class="calendar-day 05"><a href="#">5日</a></li>
10		</ul>
11	</div>
12	
13	<div class="calendar02-wrap">
14		<ul class="calendar-list 02"><p>2月</p>
15			<li class="calendar-day 01"><a href="#">1日</a></li>
16			<li class="calendar-day 02"><a href="#">2日</a></li>
17			<li class="calendar-day 03"><a href="#">3日</a></li>
18			<li class="calendar-day 04"><a href="#">4日</a></li>
19			<li class="calendar-day 05"><a href="#">5日</a></li>
20		</ul>
21	</div>	
22
23</div>

javascript
1(function($){
2
3  $(".calendar-day a").click(function(){
4  
5    var month = $(this).parent().find(".calendar-list").attr("class");
6    var day = $(this).attr("class");  
7    
8      link.href = 'https://example.com/itsu/' + month + day
9      
10  });
11})(jQuery);

なんとかうまいことできませんでしょうか？
よろしくお願い致します。

kszk311

2018/03/16 17:59

HTMLを直接変えるのが面倒なので、JSで処理したいという事でいいですか？

退会済みユーザー

2018/03/16 18:06 編集

こんばんは。お世話になっております。はい。仰るとおりです。それとも、あ、ひょっとして「がんばってHTMLを変えた方が早いぞ」のような、メリットの方が大きいでしょうか？

kszk311

2018/03/16 18:33 編集

本来ならば、JSで飛ばすよりはhrefで飛ばした方がいいです。このようにフォーマットっぽくするなら、PHPで出力するのがいいかなとか、 .eachで書き換えするのもいいかなとか思ったり。ただ、多分clickイベントでやってみたい理由があるのだろうなと思ったので、clickイベントは変えない方向で回答しておきました。

退会済みユーザー

2018/03/16 18:55

いつも妙なニーズで質問しているので、「>多分clickイベントでやってみたい理由があるのだろうなと思ったので」という配慮をして頂くあたり、さすがでございますｗ。どうもありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

クリックされたときではなく、.eachで書きかえようと思いましたが、
「link.href =」の箇所をみて、やりたい事を把握しました。

以下でどうでしょう？

javascript
1$(function(){
2	$(".calendar-day a").click(function(e){
3		e.preventDefault();
4
5		var month = $(this).closest(".calendar-list").attr("class").replace('calendar-list ', '');
6		var day = $(this).closest(".calendar-day").attr("class").replace('calendar-day ', '');  
7
8		location.href = 'https://example.com/itsu/' + month + day;
9		return false;
10	});
11})
12