자바스크립트, 제이쿼리 질문드려요!!
본문
안녕하세요. 코딩 초보 대학생입니다...
학교 수업을 많이 이해하지 못해서 코딩하는데 많이 어렵습니다..
질문 몇가지만 드릴게요.. 답변 부탁드립니다.. 수준은 하에요 ㅠㅠ
질문
choose.html
1. 버튼을 눌렀을때 배열 areas에 들어가 있는 객체 area와 이름이 같은 것에 해당하는 데이타들을 보여주고싶습니다. 그 코딩이 이것 같은데 이 코딩을 적어주면 데이타가 아애 나오질 않습니다..
if (this.area != $('#select select').val()) return true;
2. $('#list').empty(); 이 코딩이 셀렉트박스에서 선택해서 결과가 나오고 다시 다른 값을 셀렉트박스에서 선택했을때 그 전에 나온 데이타를 화면에서 비워주는건데 잘 되지가 않아요.. 다른 어디 부분이 잘못된것 같아요..
3.
introduce.html
4. (1번이 성공한 후에 제대로 해당되는 결과값이 나왔다면 그 데이타를 누르면 introduce,html로 이동하게 됩니다. 이 페이지에는 눌러서 들어온 데이타의 값들을 param으로 넘겨준것을 잘 받아야하는데
제대로 잘 넘어가게 코딩했는지 봐주세요... 1번이 제대로 안되서 introduce.html페이지의 코딩을 제대로 했는지 궁금합니다.
파일첨부 내용을 축약한 소스입니다.
choose.html
........
var areas = [
name: '강릉-경포대',
area: '강원도',
latitude: 37.798429,
longitude: 128.896338,
picture: 'img/강원/강릉_경포대.jpg',
link: 'https://www.google.co.kr/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#newwindow=1&q=%EA%B0%95%EB%A6%89%20%EA%B2%BD%ED%8F%AC%EB%8C%80',
address: '강원도 강릉시 저동 94',
tel: '*** 개인정보보호를 위한 전화번호 노출방지 ***',
etc: ''
},
{
name: '가평-아침 고요 수목원',
area: '경기도',
latitude: 37.744096,
longitude: 127.352524,
picture: 'img/경기/가평_아침고요수목원.jpg',
link: 'https://www.google.co.kr/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#newwindow=1&q=%EA%B0%80%ED%8F%89+%EC%95%84%EC%B9%A8+%EA%B3%A0%EC%9A%94+%EC%88%98%EB%AA%A9%EC%9B%90',
address: '경기도 가평군 상면 수목원로 432 아침고요수목원',
tel: '1544-6703',
etc: '연중무휴, 오전 8:30~일몰 시 (입장은 폐장 1시간 전까지 가능), 입장료 각기 다름.'
}
];
$('#list').empty();
}
updateList();
});
function updateList() {
$('#list').empty();
var buttons = document.getElementsByTagName('button');
buttons[0].onclick = function() {
$(list).each(function(){
//if (this.area != $('#select select').val()) return true;
for(var i=0; i < areas.length; i++) {
var li = $('<li>')
.appendTo($('#list')) //아이디가 list인 아이한테 더해줄거다
.data('index', i)
.click(function(){
location.href = 'introduce.html?index=' + $(this).data('index') ; // 클릭된 인덱스 값을 넘겨준다. ? 뒤에는 우리가 넘겨주고 싶은걸로 적어주면 된다.
});
$('<img>')
.attr('src', areas[i].picture) //소스 속성을 변경할거니까 attr //첫번째꺼 가져올거니가 0
.appendTo(li) //부모 지정 // li이니까 가져와야하니까 var li라고 이름을 정해서 가지고 옴
$('<span>')
.text(areas[i].name)
.addClass('name') //아래에서 클래스를 줘서
.appendTo(li);
$('<span>')
.text(areas[i].address)
.addClass('address') //아래에서 클래스를 줘서
.appendTo(li);
}
});
};
}
<body>부분
<div id="select"> 지역
</div>
<option value="선택">선택</option>
<option value="서울">서울</option>
<option value="경기도">경기도</option>
<option value="강원도">강원도</option>
</select>
<button>선택</button>
</div>
<br>
<div id="recomend"> 추천 명소
</div>
</div>
<div id="list">
</div>
introduce.html
<script>
var param = location.search.substring(1);
console.log(param.indexOf('=')); //어디에 있는지 찾는다. 못찾으면 -1을 리턴한다.
var index = param.substring(param.indexOf('=')+1);
console.log(index);
/*
$(function(){
updateList();
});
*/
function updateList() {
var point = areas[index]; // 이렇게 이름을 정해서 변수를 선언하면 변수 이름으로 쓰면 되니까 편하다
$('#result .name').text(point.name);
$('#result .address').text(point.address); // 변수 이름으로 편하게 사용함
for(var i=0; i < point.picture.length; i++) {
var li = $('<li>')
.appendTo($('.picture'));
$('<img>')
.attr('src', point.picture[i])
.appendTo(li);
}
}
<body>부분
<div id="result">
</div>
<p class="address"> </p>
<ul class="picture">
</ul>
</div>
답변 1
$(function() {
$("button").on("click", function() {
var opt = $("select option:selected").val();
var result = [];
$.each(areas, function(i) {
if(areas[i]['area'] == opt) {
for(var p in areas[i]) {
var v = areas[i][p];
result.push(p.toString() + " : " + v);
}
$("#list").html(result.join("<br />"));
}
});
});
});
http://nyaongii.dothome.co.kr/temp/wrid_75397.html
areas 배열이랑 html만 빼서 넣었습니다.
뭔가 막 복잡하게 되어 있는 것 같아서 새로 만들었습니다.
1, 2
버튼을 누르게 되면 앞에 select box에서 선택한 지역과 areas 배열에 있는 name과 같은 경우 list라는 아이디를 가진 div에 뿌려지게 만들었습니다.
html() 메소드를 써서 굳이 empty()를 안 써도 다른 항목을 선택하면 비워지게 되어 있습니다.
3번은 내용이 없어서 패스
4번은 form submit()을 해야 하는데 폼값이 select box 하나라서 이건 패스요~
감사합니다! 도움되었어요 하지만 제가 안배운 코딩들도 있어서 ㅠㅠ 수정후에 다시 질문 올릴게요!! 답변 너무 감사해요!!