BBIB
50
2020-01-30 19:36:54
6
571

html에 질문이 있습니다


리스트르 생성한 버튼식 이미지 슬라이드 입니다.

문제가 원래 input태그안에 name부분이 id로 되어있었는데 

for문으로 돌리다보니깐 id가 중복이 되서 찾아갈수가 없습니다

그래서 name으로 바꾸니깐 label태그 for태그가 먹히지가 않더군요

어떻게 해야하나요?

<%
	for (int j=0; j <keeplist.size(); j++) {
		KeepVO kvo2 = (KeepVO)keeplist.get(j);
%>


<input type="radio" class="radio-btn" name="img-1" checked />
	<li class="slide-container">
		<div class="slide">
			<img src="images/more.jpg" />
		</div>
		<div class="nav">
			<label for="img-3" class="prev">&#x2039;</label> 
			<label for="img-2" class="next">&#x203a;</label>
		</div>
	</li>

	<input type="radio" class="radio-btn" name="img-2" />
		<li class="slide-container">
			<div class="slide">
				<img src="images/pure.jpg" />
			</div>
		        <div class="nav">
				<label for="img-1" class="prev">&#x2039;</label> 
				<label for="img-3" class="next">&#x203a;</label>
			</div>
		</li>

	<input type="radio" class="radio-btn" name="img-3" />
		<li class="slide-container">
			<div class="slide">
				<img src="images/smoke.jpg" />
			</div>
			<div class="nav">
				<label for="img-2" class="prev">&#x2039;</label> 
				<label for="img-1" class="next">&#x203a;</label>
			</div>
		</li>
<li class="nav-dots">
<label for="img-1" class="nav-dot" style="background-color: #3498db;"</label> 
<label for="img-2" class="nav-dot" style="background-color: #3498db;"</label> 
<label for="img-3" class="nav-dot" style="background-color: #3498db;"</label> 
</li>
<% } %>


0
  • 답변 6

  • 잼재재미
    748
    2020-01-31 09:56:05
    그냥 input 태그에 직접 아이디 박아 넣으면 되는거아닌가요..?
  • BBIB
    50
    2020-01-31 10:21:01

    그럼 for문으로 list 돌릴때 id중복나지 않나요?

  • 잼재재미
    748
    2020-01-31 11:08:31


    <%
    for (int j=0; j <keeplist.size(); j++) {
    	KeepVO kvo2 = (KeepVO)keeplist.get(j);
    	
    	String idValue1 = UUID.randomUUID().toString().replace("-", "");
    	String idValue2 = UUID.randomUUID().toString().replace("-", "");
    	String idValue3 = UUID.randomUUID().toString().replace("-", "");
    	
    %>
    <input type="radio" class="radio-btn" id="<%=idValue1 %>" name="img-1" checked />
    	<li class="slide-container">
    		<div class="slide">
    			<img src="images/more.jpg" />
    		</div>
    		<div class="nav">
    			<label for="<%=idValue3 %>" class="prev">&#x2039;</label> 
    			<label for="<%=idValue2 %>" class="next">&#x203a;</label>
    		</div>
    	</li>
    
    	.
    	.
    	.
    <li class="nav-dots">
    <label for="<%=idValue1 %>" class="nav-dot" style="background-color: #3498db;"</label> 
    <label for="<%=idValue2 %>" class="nav-dot" style="background-color: #3498db;"</label> 
    <label for="<%=idValue3 %>" class="nav-dot" style="background-color: #3498db;"</label> 
    </li>
    <%} %>

    제가 이해를 잘 한건지는 모르겠는데

    고유한 id 값이 필요한거면 이런식으로 id값 직접 생성해서 넣어줘도 될것같네요.

    id 생성은 꼭 uuid 쓸필요는 없고 재량으로 만들면 되고..

  • BBIB
    50
    2020-01-31 12:12:50

    좋은 정보 감사합니다.

    제가 설명이 부족한거 같은데  원하는 원리는 이미지에 좌우 버튼이 있고 버튼클릭시 슬라이드 형태로 

    넘어가는 방식입니다. 

    근데 리스트 형식으로 만들어진 이미지는 첫번째에선 작동이 잘되는데

    두번째 리스트부터 아이디 중복으로 인해 적용이 안되더라구요 혹시 저방식말고

    버튼식 이미지슬라이드가 있을까요?

    간단한 이미지 슬라이드라도 괜찮습니다 버튼클릭시 다음사진으로만 넘어가기만 하면됩니다.

  • 잼재재미
    748
    2020-01-31 13:16:41

    프론트디자인 쪽에서 많이 쓰는 부트스트랩이나 sementic-ui을 써보시는게 어떠실지..?

    처음에는 좀 생소해서 낯서실수도 있는데

    이미지 슬라이드 뿐만아니라 다양하게 디자인쪽을 해결할수 있어서 편리해요.

    처음에는 조금 공부가 필요할수도 있습니다.

    https://getbootstrap.com/docs/4.4/components/carousel/

  • BBIB
    50
    2020-01-31 14:19:03

    고맙습니다 덕분에 해결했어요  ㅎㅎ

  • 로그인을 하시면 답변을 등록할 수 있습니다.