はてなブログでの「続きを読む」の修正

前回紹介した「続きを読む」をichitasoさんの助言を元に修正しました。ichitasoさんありがとうございました。以下修正されたソースコードです。

続きを読む

<script type="text/javascript">// <![CDATA[
(function () {
    var $here = $(':last');
    $(document).ready(function () {
        var $entry = $('.entry').has($here);
        if (location.pathname.match(new RegExp('^/entry/'))) {
            $('.entry-content-more', $entry).show();
        }
        else {
            $('.entry-content-see a', $entry)
            .attr('href', $('.entry-title-link', $entry).attr('href'))
            .click(function (e) {
                if (e.button === 0) {
                    $('.entry-content-see', $entry).hide();
                    $(this).attr('href', 'javascript:void(0)');
                    $('.entry-content-more', $entry).show();
                }
            });
            $('.entry-content-see', $entry).show();
        }
    });
})();
// ]]></script>
<div>
<p>前半</p>
</div>
<div class="entry-content-see" style="display: none;">
<p><a>続きを読む</a></p>
</div>
<div class="entry-content-more" style="display: none;">
<p>後半</p>
</div>

ichitasoさんの助言にもあるとおり、前回の方法では、「続きを読む｣をクリックした際に、クリックした記事だけではなく画面上のすべての記事の続きが開かれてしまうという不具合がありました。ichitasoさんにその解決法も提案していただけましたが、今回はそれとは別の方法で解決したいと思います。

他の記事ではなく自分自身の記事のみに処理を行うために、まず実行されるスクリプトそのもののDOMを取得します。そのために

$(':last')

を

$(document).ready

の外側で実行しています。こうすることでこのコードはscriptタグが作られた直後に実行されます。このscriptタグが作られた時点ではその後ろのタグはまだ作られていないため、このタグがhtml全体の末尾にあることになります。そのため

':last'

というセレクタでこのタグをさすことができます。

他にも細かい修正点はありますが主だったものは以上です。何かご意見や不具合等ありましたらまたお気軽にどうぞ。