昨日の記事で、「新館」の「写真館」に閲覧カウント機能をつけるということを書きましたが、今日になってさっそく不具合を発見。それは、たとえば同一ページ内に複数の写真がある場合に起きるのでした。
カウントアップは、大きな画像にリンクするa要素をクリックした際に発動しますので、clickイベントハンドラを定義して、そこにWebサービスを呼び出すコードを記述しました。ここまではよいです。
しかし、そのあとがよくない。Webサービスに渡すidは、ページに隠しフィールドとして埋め込まれていますが、ページに複数のサムネールがある場合、隠しフィールドも当然複数あることになります。すると、昨日のコードであるこれでは、最初のものしか引っ掛けられません。
var s = $(‘span.image :hidden’).val();
ここは、thisを使わないとダメなのでした。clickイベントハンドラの呼び出すもとととなった要素が、この場合thisに入っていますから、その親とか、姉弟を取得して、隠しフィールドを特定してやる必要があったわけです。具体的には、こう書きます。
var s = $(this).parent().find(‘span.image :hidden’).val();
最初、siblings()でもよかったのではないかと思いましたが、なぜかうまく動きません。そこで、いったん親要素を取得し、そこからfind()メソッドで目的の要素を探すことにしました。
これで、ページに複数のサムネールがある場合に、どの写真をクリックしても先頭の写真のカウントしかアップしないという問題はクリアされました。自分の思いが及ばなかったとはいえ、本当の奥が深いです。
応用すれば、カウントアップ後、それをすぐに表示にも反映させるとかできそうですが、それは別の機会に…。
コメント