リンク範囲をボックス全体に広げたいけど、HTMLのマークアップがおかしなことになるので、jQueryを使ってなんとかしたいと思っている方、複数のクラスを指定した箇所をまとめて同じ動作を適用したい方はこのページに解決方法が書いてあります！
↓こんな感じのデザインのリンク範囲を広げてボックスいっぱいにする方法です。下の画像はアイキャッチ画像にしかリンクが入っていませんが、下のコードを実装すれば全体をクリックできるようになります。
1箇所だけ（1つのクラス）に適用したい場合
jQuery(function($){
$('.scroll-item').click(function(){
window.location = $(this).find('a').attr('href');
});
});
window.locationの.locationとはwindowオブジェクトのプロパティ。
MDNには「現在のURLの情報とそれを変更するためのメソッドを提供する
」と描かれている、つまり、.locationには現在のURLの情報が格納されており、操作ができるということです。
$(this)は、jQueryのオブジェクトで.scroll-itemを指します。
$(this)にaとhrefの情報を入れたものをwindow.locationに代入したという事になります。
複数箇所に適用したい場合
ダメなパターン
複数箇所なので、+で繋いでも動きません。
$('.scroll-item' + '.scroll-item-h').click(function(){
これも動きません。
$('.scroll-item' , '.scroll-item-h').click(function(){
完成形
addを利用し、まとめて処理する事で動作します。
jQuery(function($){
var sih = $('.scroll-item-h'); //.scroll-item-hを取得し sihに代入した
var si2 = $('.scroll-item'); //.scroll-itemを取得し si2に代入した
sih.add(si2).click(function(){
window.location = $(this).find('a').attr('href');
});
});
変数にクラスを代入する。そして.addを使って同時に処理する。引数に入れた値を加える事ができる。.addは終了後破棄される。
もう1箇所追加してみる
addの第2引数に変数追加しても動作しませんでした。
var sih = $('.scroll-item-h');
var si2 = $('.scroll-item');
var si3 = $('.scroll-item3');
sih.add(si2 , si3).click(function(){ //動作せず！
window.location = $(this).find('a').attr('href');
});
addをもう一つつなぐ事で動作します。
var sih = $('.scroll-item-h');
var si2 = $('.scroll-item');
var si3 = $('.scroll-item3');
sih.add(si2).add(si3).click(function(){ //これでOK！
window.location = $(this).find('a').attr('href');
});
CSSでポインターを表現
最後にボックスのaタグ以外の拡大したリンク範囲にマウスカーソルがかかった時の処理をしないといけません。jQueryではクリックした時に拡大されますので、マウスカーソルがボックスに掛かっていてもクリックできるかわからない状態です。ポインターを変化させる簡単な方法はスタイルシートで指定することです。
指定するボックスにcursor: pointer;を追加すればカーソルが手のマークに変わります。
.scroll-item-h {
cursor: pointer;
}
以上試してみた事をまとめました。参考にしてください。
参考サイトwindow.location|MDN
ロケーションについて（Location）
