jQuery 唯のメモ

Lazy Loadで画像遅延読み込み

参考
https://syncer.jp/how-to-setting-lazy-load-images
http://www.webdesignleaves.com/wp/jquery/1335/

対象要素↓

<a href="#"><img alt="Echo UBS Headquarter Zurich_thumbnailphoto" class="lazy" src="assets/img/main/dummy.png" data-original="assets/img/main/img9.jpg" ></a>

※src属性にダミー画像。1px の Gif 画像などを用意。
※実際の画像は、data-original属性で読み込む。

そのページの末端に記述↓

<script type="text/javascript" src="assets/js/plugins/jquery.lazyload.min.js"></script>
<script>
$(function() {
    $("img.lazy").lazyload({
        effect: 'fadeIn'
    });
});
</script>

「a要素をクリックすると要素内のテキストが変化し、背景色も変わる。もう1度クリックすると元に戻る」って処理を施したい…。

*※背景色は、独自クラスを作成し、それに装飾。
※aタグ内の特定文字のみspanタグで囲み、そこだけ変化するようにする。
*

動作手順としては・・・

1. 処理対象要素を取得
2. 取得した要素に、デフォルトテキストを設定
3. クリックイベント。if文で、クリックした時にデフォルトテキストが新テキスト変更されるように設定、その際に既存クラスの消去と新クラスの追加処理もやる
4. elseでは、逆にデフォルトテキストと既存クラスが付与されるようにする。

** ※キモは、判定用変数のcount。

クリック対象要素↓

<li>
<a href="#" class="btn-u btn-u-red rounded margin-bottom-5" id="liked"><i class="fa fa-heart"></i> 340 <span>Like</span></a>
</li>

外部jsに記述

$('#liked').each(function() {
    var like = $('#liked span'); //処理対象要素を取得
    var count = 0;     //判定用変数
    var defaultText = like.text();     //取得した要素に、デフォルトテキストを設定
     $(this).click(function() {
        if ( count === 0 ){
            like.text('Liked');     //クリックした時にデフォルトテキストが新テキスト変更される
            count = 1;
            $(this).removeClass("btn-u-red");     //既存クラス消去
            $(this).addClass("btn-u-white");     //新クラス追加
        } else{
            like.text(defaultText);     //elseでは、逆にデフォルトテキストと既存クラスが付与される
            $(this).removeClass("btn-u-white");
            $(this).addClass("btn-u-red");
            count = 0;
        }
    });
});