javascript - 命名和放置 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

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