###前提・実現したいこと
javascriptで取得したHTML要素の配列に指定したidの要素が存在するかどうかを調べて、存在する場合と、しない場合でif文で条件分岐したいです。
###該当のソースコード
HTML
1<div id="frilis" class="frieria"> 2 <ul> 3 <li><span class="useimg"><img src="IMG/person.png"width=""height=""></span> 4 <span class="myfname">Username</span> 5 <span class="frimenu"> 6 <img src="IMG/menu.png"width=""height=""> 7 </span> 8 </li> 9 <li><span class="useimg"><img src="IMG/person.png"width=""height=""></span> 10 <span class="myfname">Username</span> 11 <span class="frimenu"> 12 <img src="IMG/menu.png"width=""height=""> 13 </span> 14 </li> 15. 16. 17. 18. 19同じ文の繰り返し 20 </ul> 21</div>
Javascript
1var frilisimg = document.querySelectorAll("#frilis .useimg img"); 2 3for(var i =0;i<=frilisimg.length;i++){ 4 (function(i){ 5 frilisimg[i].addEventListener("click",function(){ 6 showFriends(i); 7 },false); 8 9 })(i); 10} 11 12function showFriends(j){ 13 var Farea_P = document.querySelectorAll("#frilis ul li"); 14 var Farea2 = document.querySelector("#frilis ul li #f_area"); 15 16 for(var i=0;i<Farea_P.length;i++){ 17 if(!(i == j)){ 18 if(Farea_Pの配列要素にFarea2の要素が含まれているかどうか){ 19 Farea_P[i].removeChild(Farea2); 20 21 } 22 23 } 24}
###試したこと
if(Farea_P[i]の中にFarea2があるかどうかをforループで調べ、存在する場合はFarea2を削除するという感じにしたいです。
ここでは省略していますが、クリックされると必ずクリックされた要素にFarea2の要素が追加されるようにしています。そのため、if(Farea2)という形にすると必ず存在するため要素が含まれていないものも、Farea_P[i].removeChild(Farea2)の文が実行されるため、エラーが出ることが分かりました。
###補足情報(言語/FW/ツール等のバージョンなど)
説明が下手くそですいません、困っているので、ぜひ教えていただきたいです。
var mayFlist = document.querySelectorAll("#frilis ul li"); var blolisimg = document.querySelectorAll("#blolis li img"); var hihyolisimg = document.querySelectorAll("#hihyolis li img"); var frilisimg = document.querySelectorAll("#frilis .useimg img"); for(var i =0;i<frilisimg.length;i++){ (function(i){ frilisimg[i].addEventListener("click",function(){ showFriends(i); },false); })(i); } function showFriends(j){ var Frilist = document.querySelectorAll("#frilis ul li"); var Farea = document.createElement("div"); var Fareamenu = document.createElement("div"); var Fmain = document.createElement("div"); var Fsetting = document.createElement("div"); var Fface = document.createElement("div"); var Ffavo = document.createElement("div"); var Fname = document.createElement("div"); var Fcare= document.createElement("div"); var Careimg = document.createElement("div"); var Fchat = document.createElement("div"); var Chatimg = document.createElement("div"); var Friset = document.createElement("div"); var Frisetarea= document.createElement("div"); var Friblo = document.createElement("div"); var Frihihyo = document.createElement("div"); var Canbut = document.createElement("div"); var CloseFri = document.createElement("div"); var Uname = document.createElement("span"); var Namem = document.createElement("span"); var Okimg = document.createElement("span"); var Pname = document.createElement("p"); var Setimg = document.createElement("img"); var Personimg = document.createElement("img"); var Starimg = document.createElement("img"); var Penimg = document.createElement("img"); var Noimg = document.createElement("img"); var Snoimg = document.createElement("img"); var Plusimg = document.createElement("img"); var Pluschatimg = document.createElement("img"); var Closeimg = document.createElement("img"); Farea.id="f_area"; Fareamenu.id="f_areamenu"; Fmain.id="f_main"; Fsetting.id="f_setting"; Fface.id ="f_face"; Ffavo.id ="f_favo"; Fname.id = "f_name"; Fcare.id="f_care"; Fchat.id = "f_chat"; Friset.id="friset"; Frisetarea.id="frisetarea"; CloseFri.id="closefri"; Uname.classList.add("user_name"); Namem.classList.add("name_m"); Okimg.classList.add("ok_img"); Careimg.classList.add("careimg"); Chatimg.classList.add("chatimg"); Friblo.classList.add("friblo"); Frihihyo.classList.add("frihihyo"); Canbut.classList.add("canbut"); Setimg.src = "IMG/setting.png"; Personimg.src = "IMG/person.png"; Starimg.src = "IMG/star3.png"; Penimg.src = "IMG/pen.png"; Noimg.src = "IMG/No.png"; Plusimg.src = "IMG/pluscalendar.png"; Pluschatimg.src = "IMG/chat.png"; Snoimg.src = "IMG/No.png"; Closeimg.src = "IMG/No.png"; Frilist[j].style.position = "relative"; Frilist[j].appendChild(Farea); Farea.appendChild(Fareamenu); Fareamenu.appendChild(Fmain); Fareamenu.appendChild(Fname); Fareamenu.appendChild(Fcare); Fareamenu.appendChild(Fchat); Fareamenu.appendChild(Friset); Fareamenu.appendChild(CloseFri); Fmain.appendChild(Fsetting); Fmain.appendChild(Fface); Fmain.appendChild(Ffavo); Fsetting.appendChild(Setimg); Fface.appendChild(Personimg); Ffavo.appendChild(Starimg); Fname.appendChild(Pname); Pname.appendChild(Uname); Pname.appendChild(Namem); Pname.appendChild(Okimg); Uname.innerHTML = "UserName"; Namem.appendChild(Penimg); Okimg.appendChild(Noimg); Fcare.appendChild(Careimg); Fchat.appendChild(Chatimg); Careimg.appendChild(Plusimg); Chatimg.appendChild(Pluschatimg); Friset.appendChild(Frisetarea); Frisetarea.appendChild(Friblo); Frisetarea.appendChild(Frihihyo); Frisetarea.appendChild(Canbut); Friblo.innerHTML = "ブロック"; Frihihyo.innerHTML = "非表示"; Canbut.appendChild(Snoimg); CloseFri.appendChild(Closeimg); var favo = document.querySelector("#f_favo img"); var pen = document.querySelector("#f_name img"); var u_name = document.querySelector(".user_name"); var u_set = document.querySelector("#f_setting img"); var u_setmenu = document.querySelector("#friset"); var ok_img = document.querySelector(".ok_img"); var cancel = document.querySelector(".canbut"); var count1 = 0; var count2 = 0; var count3 = 0; var bfore_value = u_name.innerHTML; favo.addEventListener("click",function(){ if(count1 == 0){ favo.src = "IMG/star4.png"; count1++; }else if(count1 == 1){ favo.src = "IMG/star3.png"; count1--; } },false); pen.addEventListener("click",function(){ if(count2 == 0){ f_name = u_name.innerHTML; u_name.innerHTML = "<input class=\"user\"autofocus name=\"u_name\"maxlength=\"10\">"; friname = document.querySelector(".user"); friname.value = f_name; friname.type = "text"; pen.src = "IMG/check.png"; ok_img.style.display = "inline-block"; count2++; } else if(count2 == 1){ uvalue = friname.value; if(!uvalue){ u_name.innerHTML = bfore_value; }else if(uvalue){ u_name.innerHTML = uvalue; } bfore_value = u_name.innerHTML; pen.src= "IMG/pen.png"; ok_img.style.display = "none"; count2--; } },false); u_set.addEventListener("click",function(){ if(count3 == 0){ u_setmenu.style.display = "block"; count3++; }else if(count3 == 1){ u_setmenu.style.display = "none"; count3--; } },false); cancel.addEventListener("click",function(){ u_setmenu.style.display = "none"; count3--; },false); ok_img.addEventListener("click",function(){ u_name.innerHTML = bfore_value; pen.src= "IMG/pen.png"; ok_img.style.display = "none"; count2--; },false); var Farea_P = document.querySelectorAll("#frilis ul li"); var Farea2 = document.querySelector("#frilis ul li #f_area"); CancelB = document.querySelector("#f_area #closefri"); CancelB.addEventListener("click",function(){ Farea_P[j].removeChild(Farea2); },false); for(var i=0;i<Farea_P.length;i++){ if(!(i == j)){ if(Farea_P[i].querySelector("li > #f_area")){ Farea_P[i].removeChild(Farea2); } } } }
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/12/08 19:29
2016/12/08 20:05
2016/12/08 20:29
2016/12/08 20:35
2016/12/09 02:11
2016/12/09 02:26
2016/12/09 02:29
2016/12/09 04:11
2016/12/09 06:10
2016/12/09 06:24