Question

我更多地将这个问题作为简化代码的一种方式。我觉得这是可能的，但不知道如何实现它。我希望这些div使用相同的JS函数彼此相邻，但我只能通过给出某些div的唯一名称来实现这一点，同时感觉可能是不必要的。

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
});

Answer 2

您可以使用类而不是ID。

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

小提琴：http://jsfiddle.net/uvb1u8y1/7/

Answer 3

总有更多选择！

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

如果你使用上面的选择器字符串，它将匹配DIV的直接子节点的所有IMG标签与类＆＃34;滑块＆＃34;。

jQuery（基本上）选择器使用CSS选择器。您可以在此处阅读有关儿童的信息：https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

命名和放置div

3 个答案: