同じクラスのさまざまな要素があります。
すべての要素のイベントが必要ですが、次のように最初の要素からのみ情報を収集したいと思います。
elements[i].before = css($(elements[i].handle).first());
要素にカーソルを合わせると、要素ごとにアラートが表示されます...すばらしい!...しかし、first()を使用している場合でも、css()関数は3つの要素すべてcssを返します...css関数は:
function css(a){
var sheets = document.styleSheets, o = {};
for(var i in sheets) {
var rules = sheets[i].rules || sheets[i].cssRules;
for(var r in rules) {
if(a.is(rules[r].selectorText)) {
o = $.extend(o, css2json(rules[r].style), css2json(a.attr('style')));
}
}
}
return o;
}
function css2json(css){
var s = {};
if(!css) return s;
if(css instanceof CSSStyleDeclaration) {
for(var i in css) {
if((css[i]).toLowerCase) {
s[(css[i]).toLowerCase()] = (css[css[i]]);
}
}
} else if(typeof css == "string") {
css = css.split("; ");
for (var i in css) {
var l = css[i].split(": ");
s[l[0].toLowerCase()] = (l[1]);
};
}
return s;
}
私が試してみました:
if(event.target != this){
return true;
}
event.stopPropagation();
役に立たない...完全なソースはここにあります:
var options = [
'#content',
'h5'
];
var elements = [];
var current_item = '';
for(a in options){
elements[a] = {
'handle': options[a],
'before': '',
'after': ''
};
$(elements[a].handle).attr('index', a);
$(elements[a].handle).hover(
function(event){
if(event.target != this){
return true;
}
event.stopPropagation();
var i = get_index(this);
elements[i].before = css($(elements[i].handle).first());
$(this).css({
border: '1px dashed red',
padding: '5px'
});
},
function(){
var i = get_index(this);
$(this).css(elements[i].before);
}
);
$(elements[a].handle).click(
function(){
if(event.target != this){
return true;
}
event.stopPropagation();
var i = get_index(this);
alert(i);
$('#current_item').val(options[i]);
}
);
}
何か案は?