質問編集履歴

2016/12/09 05:43

投稿

usawb

スコア26

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -124,7 +124,7 @@
-```追記文
+```
 var mayFlist = document.querySelectorAll("#frilis ul li");
@@ -558,7 +558,7 @@
             if(Farea_P[i].querySelector("li >  #f_area")){
-                console.log(Farea_P[i].querySelector("li > #f_area"));
                 Farea_P[i].removeChild(Farea2);

javascriptコードを追記しました。

2016/12/09 05:43

投稿

usawb

スコア26

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -119,3 +119,455 @@
 ###補足情報(言語/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")){
+                console.log(Farea_P[i].querySelector("li > #f_area"));
+                Farea_P[i].removeChild(Farea2);
+            }
+        }
+    }
+}
+```