jQuery jCapSlide在多个动态图像上的实现
我发现了这个很酷的jQuery插件jCapSlide，它通过向上滑动覆盖div，在图像上方悬停时显示图像标题 问题是，我找不到任何关于它的文档，我找到的一些关于它的说明说，我必须按ID定位元素，但在我的情况下，这是不可能的，因为我正在动态生成图像，无法保证会有多少图像。这就是我到目前为止所做的：（我使用的是Umbraco CMS，图像是用Razor宏创建的）jQuery jCapSlide在多个动态图像上的实现,jquery,umbraco,Jquery,Umbraco,我发现了这个很酷的jQuery插件jCapSlide，它通过向上滑动覆盖div，在图像上方悬停时显示图像标题 问题是，我找不到任何关于它的文档，我找到的一些关于它的说明说，我必须按ID定位元素，但在我的情况下，这是不可能的，因为我正在动态生成图像，无法保证会有多少图像。这就是我到目前为止所做的：（我使用的是Umbraco CMS，图像是用Razor宏创建的） var products=Model.antestorself（1）.子体（“产品”）。其中（“可见”）。项； foreach（产品中的v
var products=Model.antestorself（1）.子体（“产品”）。其中（“可见”）。项；
foreach（产品中的var产品）
{
if（product.favorite==true）
{
@产品名称
}
}
<script type="text/javascript">
$(document).ready(function () {
$('.sqrProductsImage').capslide({
caption_color : '#FFFFFF',
caption_bgcolor : 'rgb(0,148,217)',
overlay_bgcolor : 'rgb(0,148,217)',
border : '',
showcaption : false
});
});
</script>
$（文档）.ready（函数（）{
$（'.sqrProductsImage'）.capslide({
标题(颜色"FFFFFF",，
标题(颜色):"rgb(0148217)"，
叠加颜色：“rgb（0148217）”，
边界：“”，
字幕：错
});
});
谢谢这不是一个真正的翁布拉科问题 您没有提供对您正在使用的脚本本身的任何引用，因此我们所能做的就是猜测实现。然而，我的建议是，如果您必须使用ID，那么只需使用特定类在所有元素上迭代并获取ID，这似乎效率很低 未经测试的示例演示我的意思：
<script type="text/javascript">
$(document).ready(function () {
var elements = $('.sqrProductsImage');
$.each(elements, function() {
$($(this).att("id")).capslide({
caption_color : '#FFFFFF',
caption_bgcolor : 'rgb(0,148,217)',
overlay_bgcolor : 'rgb(0,148,217)',
border : '',
showcaption : false
});
});
});
</script>
$（文档）.ready（函数（）{
var元素=$（'.sqrProductsImage'）；
$.each（元素、函数（）{
$（$（this.att（“id”）.capslide({
标题(颜色"FFFFFF",，
标题(颜色):"rgb(0148217)"，
叠加颜色：“rgb（0148217）”，
边界：“”，
字幕：错
});
});
});
参考资料：我最终通过这样做解决了这个问题。编写了我自己的jQuery脚本 HTML: jQuery：
$(document).ready(function () {
var div = $('.outerSqrProducts');
var overlay = $('.overlay');
var title = $('.ic_caption');
var speed = 500;
div.each(function (i) {
$(this).attr('id', 'image' + i);
var divId = $(this).attr('id');
$('#' + divId).hover(function () {
// make background opaque
$('#' + divId).find('.overlay').fadeIn(speed);
// slide down the title
$('#' + divId).find('.ic_caption').slideDown(speed);
},
function () {
$('#' + divId).find('.ic_caption').slideUp(speed);
$('#' + divId).find('.overlay').fadeOut(speed);
});
});
});
非常有魅力。谢谢您的回复。我用umbraco标记它，因为我必须解释我是动态生成这些图像的。此后，我尝试编写自己的脚本来实现同样的效果，它适用于一个图像，但不适用于多个图像。我试过你的方法，但恐怕不行。用什么方法不行？你能提供一些更详细的信息吗？或者更好的方法是在上面加一个例子。您还需要确保所有的.sqrProductsImage元素都有id，而在您的示例中它们没有id。看看这个。我试过在你们的帖子中使用$（$（this.att（“id”）），但不起作用，所以我拿出一些来看看是否有什么不同。我已经解决了。给主div一个动态id，然后在其中找到其他div。
<body>
<div class="outerSqrProducts">
<div class="sqrProductsImage">
<a href="#">
<img src="http://www.avenir-accessories.co.uk/media/4367/beewi-fiat-500-white.jpg"/>
</a>
</div>
<div class="overlay"></div>
<div class="ic_caption" id="caption1">
<h2 class="centerText">Title</h2>
</div>
</div>
<!-- this could be repeated x amount of times in the dynamic code -->
<div class="outerSqrProducts">
<div class="sqrProductsImage"> <a href="#">
<img src="http://www.avenir-accessories.co.uk/media/4367/beewi-fiat-500-white.jpg"/>
</a>
</div>
<div class="overlay"></div>
<div class="ic_caption">
<h2 class="centerText">Title</h2>
</div>
</div>
<body>
body {
background-color: #0097F0;
}
.centerText {
text-align: center;
}
.outerSqrProducts
{
display: table-cell;
vertical-align: middle;
height: 234px;
width: 234px;
background-color: #FFF;
position: relative;
}
.sqrProductsImage
{
display: inline-block;
}
.sqrProductsImage img {
max-height: 234px;
max-width: 234px;
}
.overlay, .ic_caption {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: none;
}
.overlay {
background-color: rgba(0, 151, 240, 0.5);
height: 100%;
}
.ic_caption {
background-color: rgba(0, 151, 240, 0.8);
height: 50%;
}
$(document).ready(function () {
var div = $('.outerSqrProducts');
var overlay = $('.overlay');
var title = $('.ic_caption');
var speed = 500;
div.each(function (i) {
$(this).attr('id', 'image' + i);
var divId = $(this).attr('id');
$('#' + divId).hover(function () {
// make background opaque
$('#' + divId).find('.overlay').fadeIn(speed);
// slide down the title
$('#' + divId).find('.ic_caption').slideDown(speed);
},
function () {
$('#' + divId).find('.ic_caption').slideUp(speed);
$('#' + divId).find('.overlay').fadeOut(speed);
});
});
});