domによるdata-lightboxの値の変更方法

Question

はじめまして、どうしてもわからないことがあったため、ココに書き込みさせて頂きます。
正確に説明出来る自信がありませんので理解できないところがあるかもしれませんが是非答えをよろしくお願いします。

質問ですがカテゴリをクリックするとdata-lightboxの値を変更出来るにはDOMでどのようなコードを入力したら良いのでしょうか？

ブレピュー時のImage 1 of 3とか、カテゴリがAllの時は、特に気にならないのですがsample1とかに行っちゃうと、プレビュー時の次へと行っても番号が飛び飛びです。

■ソース（抜粋）

<!-- lightboxとshuffleの組み合わせでshuffleで並び替え後、lightboxでブレピュー ・shuffleのカテゴリは、All sample1 sample2です。 利用しています。 --> <ul id="btn"> <li data-group="all">All</li> <li data-group="sample1">sample1</li> <li data-group="sample2">Sample2</li> </ul> <ul id="oList"> <li data-groups='["sample1"]'><a href="画像相対パス" data-lightbox="date1">サンプル１</a></li> <li data-groups='["sample2"]'><a href="画像相対パス" data-lightbox="date2">サンプル２</a></li> <li data-groups='["sample1"]'><a href="画像相対パス" data-lightbox="date1">サンプル３</a></li> <li data-groups='["sample2"]'><a href="画像相対パス" data-lightbox="date4">サンプル４</a></li> </ul>

Answer 1

質問ですがカテゴリをクリックするとdata-lightboxの値を変更出来るにはDOMでどのようなコードを入力したら良いのでしょうか？

JS

document.addEventListener('DOMContentLoaded',function(){
    var olist_dom = document.getElementById('oList'),
        anchors   = olist_dom.querySelectorAll('li > a');

    for ( var i = 0; i < anchors.length; i++ )
    {
        anchors[i].addEventListener('click', function(){
           this.setAttribute('data-lightbox', 'ここにクリックしたときに変更したい値');
        });
    }
}, false);

jQuery

$(document).ready(function(){
    $('#oList').find('li > a').click(function(){
        this.setAttribute('data-lightbox', 'ここにクリックしたときに変更したい値');
    });
});

PS.
date-lightboxの値はdate?
日付が入るのですか？

Comments

[kirin311]

コメントありがとうございます。
記述して頂いたコードを利用したところ、思った通りの動きでした、本当にありがとうございます。

ちなみに、data-lightboxは、JQueryのlightboxを使ってまして、グルーブ分けに使用していますので、日付は、入れていません。特に決めていない文字列のみです。

現在記述している内容、例えばですが、
→date1であれば、サンプル1とサンプル３に表示され、プレビュー時には、Image ● of 2となります（●は、現在見ているページ）

[nanndemoiikara]

解決したようで何よりです。