JavaScriptイメージを変更し、詳細を表示/閉じる

19098 ワード
setAttribute JavaScript html テキストリンク
大きな画像の下にある小さな画像の上で大きな画像を生成するコードをクリックし、[詳細]ビューの下で[詳細]ビューをクリックして[説明]ページを展開し、[詳細を閉じる]ボタンで[詳細ページ]を閉じることができます.
1.htmlコード
<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>DOM</title>
	<link rel="stylesheet" href="css/product.css">
</head>
<body>
	<div id="container">
			<h1 id="heading">에디오피아 게뎁</h1>
			<div id="prod-pic">
				<img src="images/coffee-pink.jpg" alt="에디오피아 게뎁" id="cup" width="200" height="200">
					<div id="small-pic">
						<img src="images/coffee-pink.jpg" class="small">
						<img src="images/coffee-blue.jpg" class="small">
						<img src="images/coffee-gray.jpg" class="small">
					</div>
			</div>			
			<div id="desc">
				<ul>
					<li>상품명 : 에디오피아 게뎁</li>
					<li class="bluetext">판매가 : 9,000원</li>
					<li>배송비 : 3,000원<br>(50,000원 이상 구매 시 무료)</li>
					<li>적립금 : 180원(2%)</li>
					<li>로스팅 : 2019.06.17</li>
					<button>장바구니 담기</button>
				</ul>				
				<a href="#" id="view">상세 설명 보기</a>				
			</div>
			<hr>
			<div id="detail">									
					
					<h2>상품 상세 정보</h2>
					<ul>
						<li>원산지 : 에디오피아</li>
						<li>지 역 : 이르가체프 코체레</li>
						<li>농 장 : 게뎁</li>
						<li>고 도 : 1,950 ~ 2,000 m</li>
						<li>품 종 : 지역 토착종</li>
						<li>가공법 : 워시드</li>
					</ul>
					<h3>Information</h3>
					<p>2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철처한 관리를 통해 스페셜티 커피를 생산합니다.</p>
					<h3>Flavor Note</h3>
					<p>은은하고 다채로운 꽃향, 망고, 다크 체리, 달달함이 입안 가득.</p>
			</div>
	</div>

	<script src="js/product-result.js"></script>
</body>
</html>
2.JavaScriptコード全体
var 큰그림 = document.querySelector('#cup');
var 작은그림 = document.querySelectorAll('.small');
var 오픈 = false;

for(var i =0; i<작은그림.length; i++){
	작은그림[i].addEventListener('click', function(){
		큰그림.setAttribute('src', this.src);
	})
}

var 뷰 = document.querySelector('#view');

뷰.addEventListener('click', function(){

	if(오픈 == false){
		document.querySelector('#detail').style.display = 'none';
		뷰.textContent = "상세 설명 보기";
		오픈 = true;
	}
	else{
		document.querySelector('#detail').style.display = 'block';
		뷰.textContent = "상세 설명 닫기";
		오픈 = false;
	}
});
変数宣言にhtmlコードがロードされ、off変数にfalseが格納されます.
for文では、画像にアクセスして小さな画像をクリックすることで、大きな画像に適したコードを生成できます.
ビュー変数を宣言し、if文を使用して表示/閉じる詳細説明を作成します.最初に作成した変数openがfalseの場合はtrueに変更し、textContentも変更します.また、最も重要なfalseでは、「none」と表示されているものを「display」「block」に変更し、詳細な説明ページが表示されます.
ActivityでViewの幅を正しく取得する方法
ロボットオペレーティングシステム:ROS 1からROS 2へ移行するための実用的ガイド