[jQuery] Using variables in attribute selectors
I've done a lot of search on this subject but haven't been able to
find any examples of using variables in [attribute=xx] selectors, only
literals. As far as I can see it doesn't work and I was wondering if
there is any way to make it work -- for example with special syntax
used in this position. Here is an example of what I am trying to do:
var doPagenav = function() {
$('a.pagenav').click(function() {
var dummy = $(this).attr('custom');
$('#contentpane').load(dummy);
$("#tree li a").css('background-color', '');
$("#tree li a[custom=dummy]").css('background-color', 'yellow');
})
}
The page contains a table of contents (TOC) with links that load
external HTML pages into a div called #contentpane. In the pages
themselves there are also navigation links for other pages (e.g. Next/
Previous) that load other pages. When the user clicks these links I
want to synchronize the highlight in the TOC so that the currently
displayed page title is highlighted, just as it would be when you
select it directly. In the test code the page links are in a non-
standard attribute called "custom", I'm going to deal with parsing the
href attributes later on in the development process.
The "dummy" variable defined in line 3 works in the next line for
loading the page into the #contentpane div. However, it doesn't work
in the [custom=dummy] attribute selector in the final line -- my guess
is this is prevented by the fact that this selector accepts literals
both with and without quotes. It works fine if I insert the page name
as a literal (e.g. 'introduction.htm') and I've repeatedly tested with
alerts that the "dummy" variable does contain the correct string at
this point.
I'm feeling a bit stumped. Is there any way around this problem, or an
alternative approach?
Cheers,
Tim