JS 알파벳 순 으로 도시 선택
42647 단어 모듈
<html lang="en">
<head>
<meta charset="UTF-8">
<title> title>
<link rel="stylesheet" href="style.css">
head>
<body>
<div>
<fieldset>
<legend> legend>
<label for="addr-show03"> ：
<input type="text" id="addr-show03">
label>
<div id="data-wrap">
<ul id="data-order">
<li value='0'> li>
<li value='1'>ABCDli>
<li value='2'>EFGHli>
<li value='3'>JKLMli>
<li value='4'>NPQRli>
<li value='5'>STWXli>
<li value='6'>YZli>
ul>
<div id="data-show">div>
div>
fieldset>
div>
<script src="cityAZ.js">script>
<script src="method03.js">script>
body>
html>cityAZ.js
var cityAll = [
{
name: "hot",
citys: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
},
{
name: "A",
citys: [" ", " ", " ", " ", " ", " ", " ", " ", " "]
},
{
name: "B",
citys: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
},
{
name: "C",
citys: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
},
{
name: "D",
citys: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
},
{
name: "E",
citys: [" ", " ", " "]
},
{
name: "F",
citys: [" ", " ", " ", " ", " ", " ", " "]
},
{
name: "G",
citys: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
},
{
name: "H",
citys: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
},
{
name: "J",
citys: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
},
{
name: "K",
citys: [" ", " "]
},
{
name: "L",
citys: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
},
{
name: "M",
citys: [" ", " ", " ", " ", " ", " "]
},
{
name: "N",
citys: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
},
{
name: "P",
citys: [" ", " ", " ", " ", " ", " ", " "]
},
{
name: "Q",
citys: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
},
{
name: "R",
citys: [" ", " "]
},
{
name: "S",
citys: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
},
{
name: "T",
citys: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
},
{
name: "W",
citys: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
},
{
name: "X",
citys: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
},
{
name: "Y",
citys: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ",]
},
{
name: "Z",
citys: [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]
}
]method03.js
//**************** js ******************//
/* id */
function $(str) {
return document.getElementById(str);
}
var addrShow03 = $('addr-show03');
var dataOrder = $('data-order').querySelectorAll('li');
var dataShow = $('data-show');
(function init() {
showHotCity();
})();
/* */
function showHotCity() {
dataOrder[0].className = 'cityOn';
var citysLen = cityAll[0].citys.length;
var dl = document.createElement('dl');
var dt = document.createElement('dt');
dt.innerText = cityAll[0].name;
var dd = document.createElement('dd');
dl.appendChild(dt);
dl.appendChild(dd);
for (var i = 0; i < citysLen; i++) {
var aCity = document.createElement('a');
aCity.innerText = cityAll[0].citys[i];
dd.appendChild(aCity);
}
dataShow.appendChild(dl);
}
/* */
dataOrder.forEach(function (value, index, array) {
value.onclick = function () {
for (var z = 0; z < 7; z++) {
if (z == index)
dataOrder[index].className = 'cityOn';
else
dataOrder[z].className = '';
}
dataShow.innerHTML = '';
switch (index) {
case 0:
showHotCity();
break;
case 6:
showCitys(index, 2);
break;
default:
showCitys(index, 4);
}
}
});
/* */
function showCitys(index, m) {
var currentAll = cityAll.slice(4 * index - 3, 4 * index + m - 3);
var dl = [];
for (var j = 0; j < m; j++) {
dl[j] = document.createElement('dl');
var dt = document.createElement('dt');
dt.innerText = currentAll[j].name;
dl[j].appendChild(dt);
var citysLen = currentAll[j].citys.length;
var dd = document.createElement('dd');
for (var k = 0; k < citysLen; k++) {
var aCity = document.createElement('a');
aCity.innerText = currentAll[j].citys[k];
dd.appendChild(aCity);
}
dl[j].appendChild(dd);
dataShow.appendChild(dl[j]);
}
}
/* ， ( )*/
dataShow.onclick = function (e) {
var cityShow = dataShow.querySelectorAll('a');
var e = e || window.event;
var target = e.target || e.srcElement;
if (target && target.nodeName == 'A') {
addrShow03.value = target.innerText;
}
}style.css
/* */
* {
margin: 0;
padding: 0;
}
fieldset {
width: 500px;
padding: 20px;
margin: 30px;
border: 1px solid #ccc;
}
legend{
font-size: 18px;
font-weight: bold;
}
#addr-show, #addr-show02,#addr-show03{
width: 200px;
height: 25px;
margin-bottom: 10px;
}
.btn {
width: 80px;
height: 30px;
border-radius: 4px;
border: 1px solid #ccc;
outline: none;
background-color: #aaa;
margin: 0 20px;
}
.btn:disabled{
background-color:#ccc;
}
/* */
#data-wrap{
border: 1px solid #ccc;
}
#data-order{
height: 30px;
background-color: #eee;
}
#data-order li{
list-style: none;
display: inline-block;
text-align: center;
width: 67px;
font-size: 14px;
line-height: 31px;
cursor: default;
}
.cityOn{
background-color: #fff;
}
#data-show{
padding: 20px 10px;
}
#data-show dt{
font-size: 14px;
padding: 5px;
color: #A5D2D5;
}
#data-show a{
font-size: 12px;
width: 38px;
color: #513A08;
padding: 5px;
text-decoration: underline;
}
#data-show a:hover{
color: #000;
background-color: #A5D2D5;
border-radius: 4px;
cursor: pointer;
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Ansible Module - Setupansible facts 란 ansible facts 는 remote host 에 대한 정보를 의미하며 배포판 종류, 버전, IP Address, file system 정보등을 포함. ansible 은 playboo...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
