Uncaught Syntax error, unrecognized expression: [object Object]
Working currenly on news scroller - see my live example here - EXAMPLE
When I press next/prev arrow I'm getting an error log Uncaught Syntax error, unrecognized expression: [object Object]
Why is the problem? Where is the error in the syntax?
jQuery Code:
(function($) {
/*! Scroller
---------------------------------------------*/
$.fn.Scroller = function() {
//Set height
$('.scroller').each(function() {
var height = 0;
$(this).children('div').each(function() {
if (height < $(this).height()) {
height = $(this).height();
}
});
$(this).css("height", height + "px");
});
$('.scroller').each(function() {
var NextArrow = $(this).parent().find('.next');
var PrevArrow = $(this).parent().find('.prev');
// Set a timeout
var timeOut = setTimeout(nextNotice, 5000);
// pause on hover
$(this).hover(
function() {
clearTimeout(timeOut);
}, function() {
timeOut = setTimeout(nextNotice, 5000);
});
// Next notice function called on timeout or click
//set a flag that use to be an oberver to listen when the fadeIn done
var flag = true;
function nextNotice(event) {
var CurrentScrollerDiv = $(this).parent().find('.scroller');
if (!flag) {
return false;
开发者_Python百科 }
clearTimeout(timeOut);
flag = false;
timeOut = setTimeout(nextNotice, 5000);
if ($(CurrentScrollerDiv + ' div:visible').is(CurrentScrollerDiv + ' div:last-child')) {
$(CurrentScrollerDiv + ' div:visible').fadeOut(300);
$(CurrentScrollerDiv + ' div:first-child').fadeIn("slow", function() {
flag = true;
});
} else {
$(CurrentScrollerDiv + ' div:visible').fadeOut(300).next('div').fadeIn("slow", function() {
flag = true;
});
}
return false;
}
$(NextArrow).click(nextNotice);
$(PrevArrow).click(function(event) {
var CurrentScrollerDiv = $(this).parent().find('.scroller');
if (flag) {
return false;
}
clearTimeout(timeOut);
flag = false;
timeOut = setTimeout(nextNotice, 5000);
if ($(CurrentScrollerDiv + ' div:visible').is(CurrentScrollerDiv + ' div:first-child')) {
$(CurrentScrollerDiv + ' div:visible').fadeOut(300);
$(CurrentScrollerDiv + ' div:last-child').fadeIn("slow", function() {
flag = true;
});
}
else {
$(CurrentScrollerDiv + ' div:visible').fadeOut(300).prev('div').fadeIn("slow", function() {
flag = true;
});
}
return false;
});
});
};
})(jQuery);
$(document).ready(function() {
//Blog
$('.itBlog > div:first-child').show();
//Scroller
$('.scroller').Scroller();
});
To build selectors from existing objects, use the second parameter of $
:
$('div:visible', CurrentScrollerDiv)
Or the find
function:
CurrentScrollerDiv.find('div:visible');
CurrentScrollerDiv
is not a string so it cannot be concatenated with a string to generate a string-based selector argument.
jQuery( selector, [ context ] ) jQuery( selector, [context] ) <-- you want this one, and jQuery( element ) `selector` is a string jQuery( elementArray ) jQuery( jQuery object ) jQuery() jQuery( html, [ ownerDocument ] ) jQuery( html, [ownerDocument] ) jQuery( html,props ) jQuery( callback ) jQuery( callback )
This is the problematic line:
if ($(CurrentScrollerDiv + ' div:visible').is(CurrentScrollerDiv + ' div:last-child')) {
You using string concatenation on CurrentScrollerDiv
, which .toString()
s the variable, which is not at all what you want. Don't try to string concatenate jQuery objects or DOM elements. Use jQuery's .find()
instead:
if (CurrentScrollerDiv.find('div:visible').is(CurrentScrollerDiv.find('div:last-child')) {
There is, however, almost certainly a more efficient way to write that if
statement.
Here is wrong selector:
var CurrentScrollerDiv = $(this).parent().find('.scroller');
$(CurrentScrollerDiv + ' div:visible')
fix
var CurrentScrollerDiv = $(this).parent().find('.scroller');
$('div:visible', CurrentScrollerDiv);
精彩评论