πΉ jQuery - css
π μ€νμΌ μμ± μ μ΄νκΈ°
<body>
<div class="content ct21">
<header>
<h3>Content Title</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
<br>Quas recusandae in itaque nisi, quia iure.
</p>
</header>
<section>
<div class="artGroup ltr">
<article data-num="0">
<h4>Article title 01</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis voluptates reiciendis error modi quisquam deleniti mollitia autem ipsa vero, ipsum suscipit numquam a eos vel voluptatibus excepturi similique dolor quaerat.
</p>
</article>
<article data-num="1">
<h4>Article title 02</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis voluptates reiciendis error modi quisquam deleniti mollitia autem ipsa vero, ipsum suscipit numquam a eos vel voluptatibus excepturi similique dolor quaerat.
</p>
</article>
<article data-num="2">
<h4>Article title 03</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis voluptates reiciendis error modi quisquam deleniti mollitia autem ipsa vero, ipsum suscipit numquam a eos vel voluptatibus excepturi similique dolor quaerat.
</p>
</article>
</div>
<div class="imgView"><div class="image"></div></div>
<div class="artGroup">
<article data-num="3">
<h4>Article title 04</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis voluptates reiciendis error modi quisquam deleniti mollitia autem ipsa vero, ipsum suscipit numquam a eos vel voluptatibus excepturi similique dolor quaerat.
</p>
</article>
<article data-num="4">
<h4>Article title 05</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis voluptates reiciendis error modi quisquam deleniti mollitia autem ipsa vero, ipsum suscipit numquam a eos vel voluptatibus excepturi similique dolor quaerat.
</p>
</article>
<article data-num="5">
<h4>Article title 06</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis voluptates reiciendis error modi quisquam deleniti mollitia autem ipsa vero, ipsum suscipit numquam a eos vel voluptatibus excepturi similique dolor quaerat.
</p>
</article>
</div>
</section>
</div>
</body><script>
$(function(){
var $ct21 = $('.ct21');
//path = [],
path = [
'url(img/pic01.jpg)',
'url(img/pic02.jpg)',
'url(img/pic03.jpg)',
'url(img/pic04.jpg)',
'url(img/pic05.jpg)',
'url(img/pic06.jpg)'
]
i = 0;
// path[0] = 'url(img/pic01.jpg)';
// path[1] = 'url(img/pic02.jpg)';
// path[2] = 'url(img/pic03.jpg)';
// path[3] = 'url(img/pic04.jpg)';
// path[4] = 'url(img/pic05.jpg)';
// path[5] = 'url(img/pic06.jpg)';
$ct21.find('article').click(changeImage);
function changeImage(){
//.eq(n) λ¬Έμκ°μ²΄μ μΈλ±μ€μ μΌμΉνλ : nλ²μ§Έ λ¬Έμκ°μ²΄ (μλ°μμλ 0λ²λΆν° μ€ν)
//.index() : μΈλ±μ±λ κ°μ λ°ννλ λ©μλ
//i = $(this).index();
//attributeλ μμ±μν¬μ μμ΅λλ€. μ΄λ data- μ λμ¬λ₯Ό μ¬μ©ν©λλ€.
i = $(this).attr('data-num')
console.log(i); // 0,1,2,3,4,5 λ₯Ό μ»μ μ μμ
$ct21.find('.imgView').css({backgroundImage: path[i]});
};
});
</script>
μ΄μ μ΄μ μ΄μ π₯