게시판 즐겨찾기
편집
드래그 앤 드롭으로
즐겨찾기 아이콘 위치 수정이 가능합니다.
제이쿼리 모바일 호환성 질문
게시물ID : programmer_9359짧은주소 복사하기
작성자 : bluebanana
추천 : 0
조회수 : 493회
댓글수 : 1개
등록시간 : 2015/04/15 11:57:08
<div class="drawingsBox">
<div class="drawingsBoxTitle">
<div style="float:left;">정면도</div>
<div style="float:right;">
<span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span>
</div>
</div>
<div class="drawingsBoxContent">
<img src="{{ url_for('static', filename='img/drawingsample_1.png') }}" width="100%" >
<table>
<tr>
<td><div class="drawingsBoxGrid">A1</div></td>
<td><div class="drawingsBoxGrid">A2</div></td>
</tr>
<tr>
<td><div class="drawingsBoxGrid">B1</div></td>
<td><div class="drawingsBoxGrid">B2</div></td>
</tr>
</table>
</div>
</div>



<div class="input-group form_custom" style="width:95%;">
<div class="input-group-addon">위치</div>
<select multiple id="drawingsBoxInput" class="form-control form_border_custom" placeholder="ddd">
<option>왼쪽 도면에서 위치를 선택해주세요.</option>
</select>
</div>




$("td").mouseover(function(){ 
$(this).children().css("display","table-cell"); 
}); 
$("td").mouseout(function(){ 
$(this).children().css("display","none"); 
});
$("td").click(function(){ 
$(this).children().toggleClass("showTD");
var inputDrawingTitle = $(this).parents('.drawingsBoxContent').prev().children().first().text();
var inputDrawingNum = $(this).children().text();
$("#drawingsBoxInput").append("<option selected>"+inputDrawingTitle+", "+inputDrawingNum+"</option>");
});




제일 위 테이블에서 td를 클릭하면 

초록색으로 된 select에 테이블 td의 위치를 써줍니다.

 $("td").click(function(){ 
$(this).children().toggleClass("showTD");
var inputDrawingTitle = $(this).parents('.drawingsBoxContent').prev().children().first().text();
var inputDrawingNum = $(this).children().text();
$("#drawingsBoxInput").append("<option selected>"+inputDrawingTitle+", "+inputDrawingNum+"</option>");
});

이 부분이 셀 넘버(inputDrawingNum 예) A2)와  도면이름(inputDrawingTitle, 예)정면도) 를 가져와요


셀에 마우스 오버하면 셀 넘버와 색이 바뀌고

클릭하면 $(this).children().toggleClass("showTD"); 로 계속 넘버가 뜨게 만들어져 있습니다.


데크스탑 크롬에선 잘 작동해요.

그런데

모바일(아이패드) 에서 실행해보면 

$(this).children().toggleClass("showTD");  이거부터 작동을 안해요

데스크탑에서는 크롬, 사파리 둘다 되는데 아이패드에서는 크롬 사파리 둘다 안되네요.


터치하면 셀 하나가 나타나서 멈춰있는데 다른 셀을 클릭하면 이전에 나타난게 없어지고 새로 누른거만 켜지고요.

텍스트를 추출해서 form에 입력도 안되구요.



제가 쓴 코드중에 모바일에서 작동안될 코드가 있나요? 어디를 수정해야 작동할지 모르겠어요.. 도와주세요!
전체 추천리스트 보기
새로운 댓글이 없습니다.
새로운 댓글 확인하기
글쓰기
◀뒤로가기
PC버전
맨위로▲
공지 운영 자료창고 청소년보호