JDX-01練習說明:網站設計整合

(五)jQuery中【attr屬性】與【data-*】結合

(A)jQuery程式結構

(B)html結構

<section>
    <h1>section03</h1>
    <div>
            <a href="#"><img src="images/gril01.jpg" alt="流行01" data-fag="gril01"></a>
            <a href="#"><img src="images/gril02.jpg" alt="流行02" data-fag="gril01"></a>
            <a href="#"><img src="images/gril03.jpg" alt="流行03" data-fag="gril01"></a>
            <a href="#"><img src="images/gril04.jpg" alt="流行04" data-fag="gril01"></a>
            <a href="#"><img src="images/gril05.jpg" alt="流行05" data-fag="gril01"></a>
            <a href="#"><img src="images/man01.jpg" alt="流行06" data-fag="man01"></a>
            <a href="#"><img src="images/man02.jpg" alt="流行07" data-fag="man02"></a>
            <a href="#"><img src="images/man03.jpg" alt="流行08" data-fag="man03"></a>
            <a href="#"><img src="images/man04.jpg" alt="流行09" data-fag="man04"></a>
            <a href="#"><img src="images/man05.jpg" alt="流行10" data-fag="man05"></a>
        </div>
</section>

(C)jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
	$('section:nth-of-type(3) a').each(function(){
		var $fag = $(this).children().data('fag')
			,$alt = $(this).children().attr('alt');
		$(this).children().before('<span>'+ $alt +$fag+'</span>');
	});
</script>

(D)CSS美化

/*section2============================================================*/
section:nth-of-type(3){text-align: center;}
section:nth-of-type(3) a{
                position: relative; color: aliceblue; display: inline-block; margin: 20px;
                overflow: hidden;
                border-radius: 20px; box-shadow:0 0 10px #000;}
section:nth-of-type(3) a:hover span{ bottom: 0;}
section:nth-of-type(3) a span{background: rgba(0,0,0,.6); display: block;
                                position: absolute; left: 0; bottom: -50px;
                                width: 100%; height: 50px; line-height: 50px; text-align: center;
                                transition: all .5s;}
section:nth-of-type(3) img{display: block;}