[英]how to style the light dom of each instance of a polymer custom element independently using javascript
[英]Custom jQuery method act independently on each instance of an element
我創建了一種方法,可以在鼠標懸停時在圖像的一側顯示黑條。 當它只有一個圖像時,一切都很好,但是當應用於多個圖像時,如果鼠標懸停,則兩個圖像上都會出現黑條。
是否可以讓每個圖像彼此獨立地操作,以便鼠標懸停事件僅激活該特定圖像的黑條?
jsFiddle - http://jsfiddle.net/7kw8z/11/
我通過$("img.edit").panzoom();
調用方法$("img.edit").panzoom();
這是方法:
!function($){
$.fn.panzoom = function() {
var $this = $(this);
this.imagesLoaded(function(){
$this.wrap('<div class="img_wrapper" />');
var imgEl = $this.parent(".img_wrapper");
imgEl.width($this.width());
imgEl.height($this.height());
//imgEl.offset({top:$this.offset().top,left:$this.offset().left});
imgEl.append('<div class="img_menu" />');
menuEl = imgEl.children(".img_menu");
imgEl.hover(function() {
$(menuEl).css("visibility", "visible");
}, function() {
$(menuEl).css("visibility", "hidden");
});
});
}
}(window.jQuery);
你可以做
$.fn.panzoom = function() {
return this.each(function(){
var $this = $(this);
$this.imagesLoaded(function(){
$this.wrap('<div class="img_wrapper" />');
var imgEl = $this.parent(".img_wrapper");
imgEl.width($this.width());
imgEl.height($this.height());
imgEl.append('<div class="img_menu" />');
var menuEl = imgEl.children(".img_menu");
imgEl.hover(function() {
menuEl.css("visibility", "visible");
}, function() {
menuEl.css("visibility", "hidden");
});
});
});
}
mouseenter / leave的范圍是當前元素,因此您可以使用$(this)
。 你可以使用find來獲取你想要顯示/隱藏的元素。
imgEl.hover(function() {
$(this).find(".img_menu").css("visibility", "visible");
}, function() {
$(this).find(".img_menu").css("visibility", "hidden");
});
不知道你為什么要用js做這個,你能用CSS嗎? 只需刪除
imgEl.hover(function() {
$(menuEl).css("visibility", "visible");
}, function() {
$(menuEl).css("visibility", "hidden");
});
你可以添加
.img_wrapper:hover .img_menu {
visibility: visible;
}
如果你確實需要javascript,你需要意識到你的menuEl
不是一個元素,而是一組元素* s *,由imgEl.children
表示。
人們打敗了我,但是我的回答,在這里創建一個插件是理想的方式!
$.fn.panelize = function (initState) {
// set a default show state
var show = initState || false;
var animation = {
duration: 300,
easing: 'linear',
};
return this.each(function() {
_this = $(this);
var element = {
show: $('.show', _this),
close: $('.close', _this),
content: $('.panel-content', _this),
};
var hidePanel = function () {
_this.animate({
bottom: -(element.content.height()),
},
animation.duration,
animation.easing,
function () {
element.show.show();
element.close.hide();
})
};
var showPanel = function () {
_this.animate({
bottom: 0,
},
animation.duration,
animation.easing,
function () {
element.close.show();
element.show.hide();
})
}
// search for the show button within this context
element.show.on('click', function () {
showPanel();
})
// search for the close button within this context.
element.close.on('click', function () {
hidePanel();
});
// hide panel initally, if configured
if (!show) hidePanel();
});
}
// reduced to a single class
$('.infoToggle').panelize();
Html現在看起來像這樣。
<div class="infoToggle">
<div class="panel-controller">
<div class="tab-controller">
<span class="close">CLOSE</span>
<span class="show">MORE INFO</span>
</div>
</div>
<div class="panel-content">
Content goes here
</div>
</div>
<div class="infoToggle">
<div class="panel-controller">
<div class="tab-controller">
<span class="close">CLOSE</span>
<span class="show">MORE INFO</span>
</div>
</div>
<div class="panel-content">
Content goes here
</div>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.