JQueryのプラグインColorbox とslidebars を用いて開発をしています。
sidebarsに形成されたラベルをクリックすると
他の要素に追加されたり削除したりします。以下はsidebarsの状態です。
また、colorboxので生成された要素をクリックすると以下のsidebarsの要素に追加されます。
<div class="checkbox" id="additional_member"> <input type="checkbox" name="checkbox_member" id="sidebar_member1" class="cb_member" value="155"> <label for="sidebar_member1" class="sb_member checked" id="lb_sb1"> <span id="member_name1">TEST1</span> </label> <input type="checkbox" name="checkbox_member" id="sidebar_member2" class="cb_member" value="025"> <label for="sidebar_member2" class="sb_member" id="lb_sb2"> <span id="member_name2">TEST2</span> </label> </div>
colorboxの要素をクリックしてsidebarsに追加されたラベルをクリックしても色が反転しません。
以下にsidebarsにて他の要素に転送するJSを記載しますが、下側のJSで
if($("div#additional_member label:eq(" + index + ")").hasClass("checked")){
の判定を行い処理を行うのですが、何故か再び処理を繰り返す挙動を示し、色の反転や転送動作が動きません。どこがおかしいのか分からず困っています。
ただ、初期からsidebarsにある要素は色の反転とか稼働します。
//sidebarsからさらに転送をしたり削除したり $('#additional_member').on('click', '.sb_member', function(){ var index = $(".sb_member").index(this); var val = $("#sidebar_member" + ( index +1 ) ).val(); var jn = $("#jobnumber").val(); var str = $("span#member_name" + ( index +1 )).html(); //現在のラベルがチェックされているとき if($("div#additional_member label:eq(" + index + ")").hasClass("checked")){ //hidden 項目を削除する $("div#add_member input").filter(function(){ return $(this).val() == val; }).remove(); //メンバー一覧から削除 $("ul#member_list li").filter(function(){ return $(this).text() == str; }).remove(); //サイドバーを検索して色を変更する場所を探す var j = 0; var pos = 0; $("div#additional_member input").filter(function(){ if(val == $(this).val()){ pos = j; } j++; }); $("div#additional_member label:eq(" + pos + ")").removeClass('checked'); return false; }else{ var count_li = $("ul#member_list li").length; $('<input>').attr({ type: 'hidden', class: 'member', id: 'member_id' + (index + 1), name: 'member[]', value: val }).appendTo('div#add_member'); //サイドバーを検索して色を変更する場所を探す var j = 0; var pos = 0; $("div#additional_member input").filter(function(){ if(val == $(this).val()){ pos = j; } j++; }); $("div#additional_member label:eq(" + pos + ")").addClass('checked'); //string for assigned member section var str_li = '<li id="list_elm' + (count_li + 1) + '">' + str + '</li>'; //POSTデータ一覧 var j = 0; $("div#add_member input").filter(function(){ if(val == $(this).val()){ j++; } }); //メンバー一覧 var j = 0; $("ul#member_list li").filter(function(){ if(str == $(this).text()){ j++; } }); //存在しない場合は追加 if(j == 0){ $('ul#member_list').append(str_li); } return false; } });
(追記)
問題点
2つの領域(colorbox、sidebars)に項目(label)が表示されている
初期状態で表示されている sidebarsの領域の項目(Label)をクリックすると別領域に項目が追加・削除される。
ところが、
- colorboxの項目(Label)をクリックするとsidebarsの領域にコピーされる。
- sidebarsの領域に追加された項目(Label)をクリックしても他の領域に項目が追加・削除されない。(labelの色が変化しない)
※現象としてデバッグすると
if($("div#additional_member label:eq(" + index + ")").hasClass("checked")){
の処理が繰り返し行われているようです。
原因が全く分からず、途方に暮れています。
宜しくお願いいたします。
回答1件
あなたの回答
tips
プレビュー