div의 이름 지정 및 배치

Question

이 코드는 코드를 단순화하는 방법으로 더 많이 묻습니다. 나는 이것이 가능하다고 느끼지만 그것을 성취 할 방법을 모르겠습니다. 이 div가 같은 JS 함수로 서로 옆에 있기를 원하지만 특정 div를 고유 한 이름을 지정하여이 작업을 수행 할 수 있었지만 필자는 불필요한 느낌 일 수있었습니다.

http://jsfiddle.net/uvb1u8y1/6/

CSS :

#grid { 
width:1024px; 
position:absolute; 
background-color: #7f82a3; 
} 
.tile { 
position:relative; 
display: block; 
float:left; 
margin-left:10px; 
margin-top:10px; 
border:2px solid #fff; 
-moz-box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5); 
-webkit-box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5); 
box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5); 
} 
.slider { 
margin: 0px auto; 
} 
.contenthover { 
padding: 22px 20px 10px 20px; 
} 
.contenthover, .contenthover h4, contenthover a { 
color: #fff; 
font-size:16px; 
} 
.contenthover h4, .contenthover p { 
margin: 0 0 10px 0; 
line-height: 1.1em; 
padding: 0; 
} 
.contenthover h4 { 
text-align:center; 
} 
.contenthover a.mybutton { 
display: block; 
text-align:center; 
padding: 5px 10px; 
margin-top: 15px; 
background: #0b94e5; 
color: #fff; 
-moz-border-radius: 4px; 
-webkit-border-radius: 4px; 
border-radius: 4px; 
} 
.contenthover a.mybutton:hover { 
background: #005588; 
} 

HTML :

<div id="grid"> 
<div class="tile"> 
    <div class="slider"> 
     <img id="slidercell01" src="http://placehold.it/188x106" width="188" height="106" /> 
     <div class="contenthover"> 

<h4>Lorem ipsum dolor</h4> 

      <p><a href="#" class="mybutton">Lorem ipsum</a> 

      </p> 
     </div> 
    </div> 
</div> 
<div class="tile"> 
    <div class="slider"> 
     <img id="slidercell02" src="http://placehold.it/188x106" width="188" height="106" /> 
     <div class="contenthover"> 

<h4>Lorem ipsum dolor</h4> 

      <p><a href="#" class="mybutton">Lorem ipsum</a> 

      </p> 
     </div> 
    </div> 
</div> 
<div class="tile"> 
    <div class="slider"> 
     <img id="slidercell03" src="http://placehold.it/188x106" width="188" height="106" /> 
     <div class="contenthover"> 

<h4>Lorem ipsum dolor</h4> 

      <p><a href="#" class="mybutton">Lorem ipsum</a> 

      </p> 
     </div> 
    </div> 
</div> 
</div> 

JS :

$('#slidercell01').contenthover({ 
effect: 'slide', 
slide_speed: 300, 
overlay_background: '#000', 
overlay_opacity: 0.8 
}); 
$('#slidercell02').contenthover({ 
effect: 'slide', 
slide_speed: 300, 
overlay_background: '#000', 
overlay_opacity: 0.8 
}); 
$('#slidercell03').contenthover({ 
effect: 'slide', 
slide_speed: 300, 
overlay_background: '#000', 
overlay_opacity: 0.8 
}); 

Answer 1

ID 대신 클래스를 사용할 수 있습니다.

$('.slidercell').contenthover({ 
    effect: 'slide', 
    slide_speed: 300, 
    overlay_background: '#000', 
    overlay_opacity: 0.8 
}); 

바이올린 : http://jsfiddle.net/uvb1u8y1/7/

Answer 2

$('#slidercell01,#slidercell02,#slidercell03').contenthover({ 
    effect: 'slide', 
    slide_speed: 300, 
    overlay_background: '#000', 
    overlay_opacity: 0.8 
}); 

Answer 3

는 항상 더 많은 옵션이 있습니다!

$('.slider > img').contenthover({ 
    effect: 'slide', 
    slide_speed: 300, 
    overlay_background: '#000', 
    overlay_opacity: 0.8 
}); 

위의 선택기 문자열을 사용하면 DIV의 직접 자식 인 "슬라이더"와 일치하는 모든 IMG 태그와 일치합니다.

jQuery (기본적으로) 셀렉터는 CSS 선택기를 사용합니다. 여기에서 선택하는 어린이에 대해 읽을 수 있습니다 : https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors