리스트값을 랜덤으로 배치되게끔 하려고 합니다. 채택완료
재미니다
1년 전
조회 1,933
안녕하세요.
사이트에 등록된 매장의 리스트를 페이지 로드할 때마다 출력되는 순서를 랜덤으로 출력되게 하려고 합니다
지식이 많이 없어서 챗GPT의 도움으로 셔플 함수를 스크립트에 추가해봤는데 작동이 안 되어서 이렇게 또 질문을 하게 되었네요^^;;
아래는 리스트 페이지와 자바 코드입니다.
html
</p>
<p><div id="store_list_sch"></p>
<p> <div class="store_find"></p>
<p> <ul class="find_ul"></p>
<p> <li></p>
<p> <button class="ab" onClick="toggle_fade('popup_loca',this);"></p>
<p> <img src="<?=G5_THEME_IMG_URL?>/icon_map.svg" alt=""></p>
<p> <span id="loca_txt"><?php echo (!$sido ? '전체 지역' : fnSidoTo2Letter($sido).' > 전체'); ?></span></p>
<p> </button></p>
<p> </li></p>
<p> <li></p>
<p> <button class="ab" onClick="toggle_fade('popup_theme',this);"></p>
<p> <img src="<?=G5_THEME_IMG_URL?>/icon_widgets.svg" alt=""></p>
<p> <span id="theme_txt">테마 선택</span></p>
<p> </button></p>
<p> </li></p>
<p> </ul></p>
<p> <form method="get" onsubmit="return fnStoreSearchSubmit()"></p>
<p> <div class="find_form"></p>
<p> <input type="hidden" name="sido" id="sido" value="<?=$sido?>"></p>
<p> <input type="hidden" name="sigungu" id="sigungu" value="<?=$sigungu?>"></p>
<p> <input type="hidden" name="theme" id="theme" value="<?=$theme?>"></p>
<p> <input class="inp" type="text" name="stx" id="stx" placeholder="검색어를 입력해 주세요"></p>
<p> <button class="ab"><img src="<?=G5_THEME_IMG_URL?>/icon_sch_b.svg" alt=""></button></p>
<p> </div></p>
<p> </form></p>
<p> </div></p>
<p> <div id="store_list_wrap"></p>
<p> </div></p>
<p></div></p>
<p>
자바스크립트
</p>
<p><script></p>
<p> $(document).ready(function() {</p>
<p> // 페이지 로드 시 실행</p>
<p> shuffleList();</p>
<p> </p>
<p> $("#themeall").click(function() {</p>
<p> if($("#themeall").is(":checked")) $("input[name=theme_c]").prop("checked", true);</p>
<p> else $("input[name=theme_c]").prop("checked", false);</p>
<p> });</p>
<p> </p>
<p> $("input[name=theme_c]").click(function() {</p>
<p> var total = $("input[name=theme_c]").length;</p>
<p> var checked = $("input[name=theme_c]:checked").length;</p>
<p> </p>
<p> if(total != checked) $("#themeall").prop("checked", false);</p>
<p> else $("#themeall").prop("checked", true);</p>
<p> });</p>
<p> </p>
<p> $("input[name=sido_c]").change(function() {</p>
<p> fnSelSido2($(this).val(), '');</p>
<p> });</p>
<p>});</p>
<p> </p>
<p>function shuffleList() {</p>
<p> var storeList = $("#store_list_wrap");</p>
<p> var items = storeList.children();</p>
<p> </p>
<p> while (items.length) {</p>
<p> storeList.append(items.splice(Math.floor(Math.random() * items.length), 1)[0]);</p>
<p> }</p>
<p>}</p>
<p> </p>
<p>function fnThemeEnter(){</p>
<p> var theme = '';</p>
<p> var theme_txt = '';</p>
<p> var more = 0;</p>
<p> $("input[name=theme_c]:checked").each(function(){</p>
<p> if(theme != ''){</p>
<p> theme += ',';</p>
<p> more++;</p>
<p> }</p>
<p> theme += $(this).val();</p>
<p> </p>
<p> if(more < 1){</p>
<p> theme_txt += $(this).val();</p>
<p> }</p>
<p> });</p>
<p> </p>
<p> if(more > 0){</p>
<p> theme_txt += " 외 "+more+"개";</p>
<p> }</p>
<p> if(theme_txt == ''){</p>
<p> theme_txt = '테마 선택';</p>
<p> }</p>
<p> </p>
<p> $("#theme").val(theme);</p>
<p> $("#theme_txt").text(theme_txt);</p>
<p> toggle_fade('popup_theme', this);</p>
<p> fnStoreSearchSubmit(1);</p>
<p> shuffleList();</p>
<p>}</p>
<p> </p>
<p>function fnLocationEnter(){</p>
<p> var sido = $("input[name=sido_c]:checked").val();</p>
<p> var sigungu = $("input[name=sigungu_c]:checked").val();</p>
<p> $("#sido").val(sido);</p>
<p> $("#sigungu").val(sigungu);</p>
<p> </p>
<p> var loca_txt = "지역 선택";</p>
<p> </p>
<p> if(sido != ""){</p>
<p> switch(sido){</p>
<p> case '경상북도': loca_txt = '경북'; break;</p>
<p> case '경상남도': loca_txt = '경남'; break;</p>
<p> case '전라북도': loca_txt = '전북'; break;</p>
<p> case '전라남도': loca_txt = '전남'; break;</p>
<p> case '충청북도': loca_txt = '충북'; break;</p>
<p> case '충청남도': loca_txt = '충남'; break;</p>
<p> default: loca_txt = sido.substr(0, 2); break;</p>
<p> }</p>
<p> if(sigungu == ""){</p>
<p> loca_txt += " > 전체";</p>
<p> } else {</p>
<p> loca_txt += " > "+sigungu;</p>
<p> }</p>
<p> }</p>
<p> </p>
<p> $("#loca_txt").text(loca_txt);</p>
<p> toggle_fade('popup_loca', this);</p>
<p> fnStoreSearchSubmit(1);</p>
<p> shuffleList();</p>
<p>}</p>
<p> </p>
<p>function fnSelSido2(sido, sigungu){</p>
<p> $.ajax({</p>
<p> type: "POST",</p>
<p> url: "/sub/ajax.sigungu2.php",</p>
<p> data: {sido : sido, sigungu: sigungu},</p>
<p> cache: false,</p>
<p> async: false,</p>
<p> contentType: "application/x-www-form-urlencoded; UTF-8",</p>
<p> success: function(data){</p>
<p> $("#loca_col_ul_sigungu").html(data);</p>
<p> }</p>
<p> });</p>
<p>}</p>
<p> </p>
<p>function fnStoreSearchSubmit(page){</p>
<p> var sido = $("#sido").val();</p>
<p> var sigungu = $("#sigungu").val();</p>
<p> var theme = $("#theme").val();</p>
<p> var stx = $("#stx").val();</p>
<p> </p>
<p> var lat = $("#lat_head").val();</p>
<p> var lng = $("#lng_head").val();</p>
<p> </p>
<p> $.ajax({</p>
<p> type: "POST",</p>
<p> url: "/sub/ajax.store_list_find.php",</p>
<p> data: {page, lat, lng, sido, sigungu, theme, stx},</p>
<p> cache: false,</p>
<p> async: false,</p>
<p> success: function(data){</p>
<p> $("#store_list_wrap").html(data);</p>
<p> shuffleList(); // 리스트 갱신 후 다시 섞기</p>
<p> }</p>
<p> });</p>
<p> return false;</p>
<p>}</p>
<p></script></p>
<p>
링크에 url 기재하며, 고수 분들의 조언을 기다립니다!
댓글을 작성하려면 로그인이 필요합니다.
답변 4개
채택된 답변
+20 포인트
1년 전
</p>
<p>// var storeList = $("#store_list_wrap");</p>
<p>var storeList = $("#store_list_wrap > ul");</p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
재미니다
1년 전
댓글을 작성하려면 로그인이 필요합니다.
1년 전
제이쿼리는 사용하지 않아서 잘 모르겠고...
바닐라의 경우 아래처럼 cnt_1 부터 cnt_n 까지... n 은 원하는 숫자입니다. <div> 안에 재주껏 내용물을 넣어보세요.
</p>
<p><div id="cntDiv"></div>
<script>
cnt_1 = "<div>1번 내용</div>";
cnt_2 = "<div>2번 내용</div>";
cnt_3 = "<div>3번 내용</div>";
cnt_4 = "<div>4번 내용</div>";
cnt_5 = "<div>5번 내용</div>";
cnt_6 = "<div>6번 내용</div>";
cnt_7 = "<div>7번 내용</div>";
for (cntTotal = 0; this["cnt_" + (cntTotal + 1)]; cntTotal++);
nA = [];
for (i = 0; i < cntTotal; i++) nA.push(i + 1);
for (j in nA) {
rN = Math.floor(Math.random() * nA.length);
changN = nA[rN];
nA[rN] = nA[j];
nA[j] = changN;
}
for (k of nA) cntDiv.innerHTML += this["cnt_" + k];
</script></p>
<p>
결과물은 https://wittazzurri.com/editor/html_editor.php 에서 확인해 보세요.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
재미니다
1년 전
비타주리님 댓글 감사합니다.
말씀하신 바닐라가 무엇인지 잘 모르겠습니다만 나중에 한 번 공부해보겠습니다!!
말씀하신 바닐라가 무엇인지 잘 모르겠습니다만 나중에 한 번 공부해보겠습니다!!
댓글을 작성하려면 로그인이 필요합니다.
1년 전
추출한 리스트를 자바스크립트로 shuffleList() 하는 작업은 필요 없으며
ajax.store_list_find.php 에서 리스트를 추출하는 쿼리에 ORDER BY RAND() 를 넣어주면 됩니다
// 페이지 로드 시 실행
shuffleList();
위 코드 또한 bbs/list.php에서 $sql_order 에 다음처럼 조건을 주어서 만들면 됩니다
if($bo_table=='free') $sql_order =' order by rand()';
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
재미니다
1년 전
균이님 답변 감사드립니다!!!
조금 더 공부해보겠습니다^^
조금 더 공부해보겠습니다^^
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
매번 해결책을 알려주셔서 감사하게도 너무 잘 됩니다.
항상 답변 달아주셔서 너무너무 감사합니다@@@@@!!!!!!!!