上昇ブログ

people for the living

hrefリンクを押したときに長い処理をしたい場合のテクニック

<script type="text/javascript">
$(".photo_dialog_link").click(function(){
    // 
    // クリックされた時の処理
    // 2枚目がクリックされたら、2枚目に対して色々な処理を行う
    // 
});
</script>

<body>
<a href="javascript:void(0);" class="picture_link" />
    <img src="" alt="画像がない場合に表示する文字列をここに書く" class="picture_img" />
    <input type="hidden" class="pic1" value="1枚目" />
</a>
<a href="javascript:void(0);" class="picture_link" />
    <img src="" alt="画像がない場合に表示する文字列をここに書く" class="picture_img" />
    <input type="hidden" class="pic2" value="2枚目" />
</a>
<a href="javascript:void(0);" class="picture_link" />
    <img src="" alt="画像がない場合に表示する文字列をここに書く" class="picture_img" />
    <input type="hidden" class="pic3" value="3枚目" />
</a>
</body>

まず、javascript:void(0);はリンクを書きたいけどタグの中に遷移先を書きたくない場合に使います。

<a href="javascript:void(0);"></a>

上記のように書いてあると、例えば2枚目の画像をクリックすると、2枚目に対しての処理(click内に実装)が行われますね。