jquery：attr()

このプログラムは下記から構成されています。

<div style='display:flex;'>
	<div class='url_box1' style='cursor:pointer ; border:1px black solid ; padding:10px ;width:50%;'> 
		<p style='text-align:center;'>target属性 あり</p>
		<a href = 'https://school.t-spirits.com' target = '_blank' ></a> 
		<img style='width:100%;' src='https://school.t-spirits.com/wp-content/uploads/2021/06/mirai.png' alt='mirai1'>
	</div>
	<div class = 'url_box2' style='cursor:pointer ; border:1px #000 solid ; padding:10px ;width:50%;margin-left:10px;' > 
		<p style='text-align:center;'>target属性 なし</p>
		<a href = 'https://school.t-spirits.com'></a> 
		<img style='width:100%;' src='https://school.t-spirits.com/wp-content/uploads/2021/06/mirai.png' alt='mirai1'>
	</div>
</div>
<script>
	$(function(){ 
		$('.url_box1 , .url_box2').click(function(){ 
			var Url = $(this).find('a').attr('href'); 
			var Target= $(this).find('a').attr('target');
			if(Target == '_blank'){window.open( Url );} 
			else{location.href= Url;}
		});
	});
</script>

■4行目と9行目

<a>タグの中にtarget属性とhref属性が設定されています。

■16～17行目

jQueryで<a>タグの中のtarget属性とhref属性の値を取得しています。

上記事例では.attr()で取得していますが、これを.prop()に変えても問題ありません。

■18行～19行目

target属性が'_blank'ならば、window.open()で[新しいタブ]に表示し、空白ならlocation.hrefで[現在のタブ]に履歴付きで表示しています。

上記のプログラムは下記から構成されています。

<span class='new_option' option_val='20,40,60' option_data='サイズ20,サイズ40,サイズ60'></span>
<select class='option' name='select'> 
	<option value='#none#'>選択してください</option>
	<option value='1'>項目1</option> 
	<option value='2'>項目2</option> 
	<option value='3'>項目3</option> 
</select><br>
<button type='button' class='set' style='margin-top:10px;'>置換</button>
<button type='button' class='reset' style='margin-top:10px;'>リセット</button>
<script>
	$(function(){
		$('.set').click(function(){
			var option_val  = $('.new_option').attr('option_val').split(','); // HTMLからオプション値を取得し配列化
			var option_data = $('.new_option').attr('option_data').split(',');// HTMLからオプションラベルを取得し配列化
			var count = option_val.length;									                 	// 上記の配列個数を取得
			$('.option').empty();	// ターゲットのオプションを空にする
			$('.option').append('<option value="#NONE#" selected="selected">選択してください</option>');
			// オプション値を書き込む
			for (var i=0; i<count; i++) {
				$('.option').append('<option value="'+ option_val[i] + '">' + option_data[i] + '</option>');
			}//forの終了		
		});
		$('.reset').click(function(){
			$('.option').empty();					// ターゲットのオプションを空にする
			$('.option').append('<option value="#NONE#" selected="selected">選択してください</option>');
			$('.option').append('<option value="1" >項目1</option>');
			$('.option').append('<option value="2" >項目2</option>');
			$('.option').append('<option value="3" >項目3</option>');
		});
	});
</script>

■1行目

セレクト値を変更したいデータをHTMLで記述しています。

■2～9行目

通常のセレクト文です。

■12～22行目

更新ボタンが挿入されたら、変更したい値をattrで読み込んで、変更しています。

■23～29行目

リセットボタンが挿入されたら、元のデータを書き込んでいます。

上記のプログラムは下記から構成されています。

<select class='option' name='select'> 
	<option value='#none#'>選択してください</option>
	<option value='1'>項目1</option> 
	<option value='2'>項目2</option> 
	<option value='3'>項目3</option> 
</select><br>
<button type='button' class='reset' style='margin-top:10px;'>リセット</button>
<script>
	$(function(){
		$('.reset').click(function(){
		 $('.option').prop('selectedIndex', 0); // セレクト値を0番目に変更しています。
		});
	});
</script>

■11行目

'selectedIndex'プロパティを0にセットしています。