[英]How to target separate dynamic div once Cluetip activates?
I have a catalog of products. 我有一个产品目录。 When you rollover the thumbnail - description of the product appears in tooltip (Cluetip). 将鼠标悬停在缩略图上时-工具说明(Cluetip)中将显示产品说明。 I need a shadow to appear around the related image when Cluetip is activated. 当提示提示被激活时,我需要在相关图像周围出现阴影。
For that I created separate div with shadow around image and This is how I target div when Cluetip activates: 为此,我在图像周围创建了带有阴影的单独的div,这就是当Cluetip激活时我定位div的方式:
onActivate: function() { $("#shadow").fadeIn(1000); }
But the problem is in my case CMS generates div's IDs dynamically, so they have names like #shadow6, #shadow8, #shadow17, etc. 但问题是在我的情况下,CMS动态生成div的ID,因此它们的名称如#shadow6,#shadow8,#shadow17等。
My question is: How to target specific dynamic div's ID, once Cluetip is activated on it? 我的问题是:一旦激活了Cluetip,如何定位特定动态div的ID?
jQuery: jQuery的:
<script type="text/javascript">
$(document).ready(function () {
$('.thumbnail').cluetip({
fx: {
open: 'fadeIn',
openSpeed: '2000'
},
showTitle: false,
cursor: 'pointer',
positionBy: 'auto',
height: '210px',
topOffset: 0,
leftOffset: 20,
local: true,
sticky: true,
mouseOutClose: true,
onActivate: function () {
$("#shadow").fadeIn(1000);
},
onHide: function () {
$("#shadow").fadeOut(300);
}
});
});
</script>
HTML/PHP (In the loop) HTML / PHP(循环中)
<div id="shadow{$obj_id}" style="position: absolute; display:none;
width:150px; height:190px;"></div>
<div class="thumbnail">
<img src="/images/product.jpg" />
</div>
ACTUAL CODE 实际代码
<div id="shadow1"></div>
<a href="/shoe-model-name.html">
<span class="cm-template-box" template="common_templates/image.tpl" id="te3">
<img class="cm-template-icon hidden" src="/skins/test/customer/images/icons/layout_edit.gif" width="16" height="16" alt="" />
<img class="thumbnail" rel="#popupz1" src="/images/product-tmb.jpg" width="150" height="180" alt="" /></span>
</a>
You should be able to refer to your shadow element using the Attribute Starts With Selector like: 您应该能够使用“ 以选择器开头 ” 属性来引用阴影元素:
$(this).closest('a').prev('div[id^="shadow"]');
This selects the previous element to the first anchor wrapping the cluetip-triggering .thumbnail
(ie $(this)
) in case it a. 这将选择第一个锚点的前一个元素,以包裹提示触发的.thumbnail
(即$(this)
)。 is a div
and b. 是div
和b。 its id starts with the String "shadow". 其ID以字符串“ shadow”开头。 Based on the markup you have shown this should be working. 根据您显示的标记,这应该可以正常工作。
ie: 即:
onActivate: function(){
$(this).closest('a').prev('div[id^="shadow"]').fadeIn(1000);
},
onHide: function(){
$(this).closest('a').prev('div[id^="shadow"]').fadeOut(300);
}
See this working fiddle with your actual markup. 看到这个工作的小提琴与您的实际标记。
EDIT : Since you seem to have access to the PHP that generates the markup why don't you just use a class to refer to your shadow elements? 编辑 :既然您似乎可以访问生成标记的PHP,为什么不只使用一个类来引用您的影子元素呢? In case you would have markup like: 如果您有这样的标记:
<div id="shadow8" class="cluetip-shadow" style="position: absolute; display:none; width:150px; height:190px;" ></div>
<div class="thumbnail" >
<img src="/images/product.jpg" />
</div>
You could just do: 您可以这样做:
$(this).prev('.cluetip-shadow').doSth();
Does not make to much of a difference in your case since it is rather simple, but it can get really helpful when things get bigger and more complex. 因为它很简单,所以对您的情况没有多大影响,但是当事情变得越来越大和越来越复杂时,它会真正有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.