使ったほうがいい気がする。
どういうアレか、想定する状況
記事一覧があるとする。
<ul>
<li>
<div class="img"><img src="***" alt=""></div>
<div class="txt">
<div class="ttl"><a href="">***</a></div>
<div class="sub">0000/00/00</div>
</div>
</li>
︙
</ul>これだとタイトル部分しかクリックできないのでユーザーに優しくないという考えがある。
最近はほとんどスマホからの閲覧が勝ってるんで、極力広く取ったほうがいいよねって。
そうするとこうなる。
<ul>
<li>
<a href="">
<div class="img"><img src="***" alt=""></div>
<div class="txt">
<div class="ttl">***</div>
<div class="sub">0000/00/00</div>
</div>
</a>
</li>
︙
</ul>こうなれば<li>の中が全部クリック領域になるし、要望通りの動作する。
当ブログのテーマであるCocoonも同じ（202309現在）。
だけど実際問題、<a>に色々突っ込むのは作法として良くない。
じゃあどうしようかという話。
個別にリンク付与
クリックするところは大体画像かタイトルだから、必要なところを<a>で囲えばいいじゃんという方法。
<ul>
<li>
<div class="img"><a href=""><img src="***" alt=""></a></div>
<div class="txt">
<div class="ttl"><a href="">***</a></div>
<div class="sub">0000/00/00</div>
</div>
</li>
︙
</ul>実際のところこれは悪くないし、割とポピュラー。
だけどDOMが増えまくるので微妙じゃない？という見方がある。個人的なところでは、コンテンツもりもりなページに一覧を乗っけることになって、DOM数をGoogleに怒られて、出力数を一つ減らして調整する羽目になった。やりたいことに影響が出る場合があるんで、あんまりよくない。
jsでクリック範囲を操作する
本題。
htmlはこれ。この状態から<li>をクリックしたら<a>に仕込んであるhrefに遷移する内容をjs（jQuery）作る。
<ul>
<li>
<div class="img"><img src="***" alt=""></div>
<div class="txt">
<div class="ttl"><a href="">***</a></div>
<div class="sub">0000/00/00</div>
</div>
</li>
︙
</ul>で、こう。
$(function(){
$('ul li').on('click',function(){
window.location.href = $(this).find('a').attr('href');
})
})<li>をクリックしたら自身の中にある<a>から情報を抜いて遷移。
クリックした際に発火する内容だから、予め<li>それぞれに<a>の内容をどうのこうのする必要はない。短く済んでいいですね。
注意点
あんまりないと思うけど、複数の<a>を仕込んだ場合はちゃんと<li>の遷移先はこれだって具体的な指定をすること。
上記の例は<a>が一つしかないからセーフ。
まとめ
htmlに自分の都合を押し付けると割となんとかなることは多いんだけど、SEOとか考えたらよろしくないことになる。後に響く地雷になっちゃうんで、気をつけたほうがいいです。
追記：20240524 応用編
こういうのがあるとする。
<ul>
<li>
<div class="img"><img src="***" alt=""></div>
<div class="txt">
<div class="ttl"><a href="">***</a></div>
<div class="sub">0000/00/00</div>
</div>
</li>
<li>
<div class="img"><img src="***" alt=""></div>
<div class="txt">
<div class="ttl"><a href="" target="_blank">***</a></div>
<div class="sub">0000/00/00</div>
</div>
</li>
︙
</ul>つまり、ものによって「target=”_blank”」の有無がある場合。
条件分岐でやっていける。
$(function(){
$('ul li').on('click',function(){
var attrTarget = $(this).find('a').attr('target');
var attrHref = $(this).find('a').attr('href');
if(attrTarget == '_blank'){
window.open(attrHref, '_blank');
}else{
window.location.href = attrHref;
}
})
})そんな感じで。
コメント