アンカータグを含むdivタグなどの親要素全体をリンク化させる、Linkboxスクリプト

2018年7月30日2019年8月13日

指定した要素をクリックすると、子要素のaタグのhref属性を読み取って要素全体をアンカータグ化させるためのコードです。

divタグの中身をaタグで全部ラップ化したり、aタグをabsoluteで親要素全体に被せるというようなことをしなくてよくなり、結構楽。

jQueryでの実装コード

(function LinkBox() {
    let linkBoxSelector = '.linkbox';
    $(document).on('click', linkBoxSelector, function() {
        if( $(this).find("a").attr('target') ) {
            window.open( $(this).find("a").attr("href") );     //target属性があれば別タブで開く
        } else {
            window.location = $(this).find("a").attr("href");
        }
        return false;
    });
})();

jQueryなしでの実装コード

(function LinkBox() {
    let linkBoxSelector = '.linkbox';
    let linkBoxes       = document.querySelectorAll(linkBoxSelector);

    for ( let i = 0; i < linkBoxes.length; i++ ) {
        linkBoxes[i].addEventListener('click', function (e) {
            e.preventDefault();
            const aTag       = linkBoxes[i].querySelector('a');
            const attrHref   = aTag.getAttribute('href');
            if( aTag.getAttribute('target') ) {
                window.open( attrHref );  //target属性があれば別タブで開く
            } else {
                window.location = attrHref;
            }
        });
    }
})();

JS jQuery