jQuery/Javascript - Variable into CSS change

Question

I'm writing HTML in Java using a servlet and I'm having a problem where scrolling over a DOM object (third party, jqplot) will light up the text for a particular list. I have HTML (declared before the jQuery):

<li id='cap_1'>
  <span>DOG</span>
</li>

And the following code later:

out.println("<script>$('#chart2').bind('jqplotDataHighlight', function (ev, seriesIndex, pointIndex, data) { var x = 'cap_'+pointIndex; alert(x); $(x).css(\"display\",\"none\"); } );</script>");

The alert is triggering and returns correctly (cap_1). But the CSS isn't working (i've tried display, background-color, color, etc - nothing worked).

What am I missing? jQuery and library declarations are confirmed and the bind is part of the jqplot library.

score 1 · Accepted Answer · answered Mar 14 '13 at 20:50

1

You need to add # symbol before x.

$('#' + x).css(... and so on

Or, where you declare x:

... var x = '#cap_' + ...

answered Mar 14 '13 at 20:50

Vlad

2,475
21
32

Bleh - The most simple of things... Thanks for finding! – user2124871 Mar 14 '13 at 21:02

score 1 · Answer 2 · answered Mar 14 '13 at 20:51

You are missing the '#' selector:

out.println("<script>
               $('#chart2').bind('jqplotDataHighlight', 
                                  function (ev, seriesIndex, pointIndex, data) { 
                                      var x = '#cap_'+pointIndex; //<-- Here
                                      alert(x); 
                                      $(x).css(\"display\",\"none\"); 
                                  });
            </script>");

score 0 · Answer 3 · answered Mar 14 '13 at 20:55

0

You are missing the DOG selector:

out.println("<script>$('#chart2').bind('jqplotDataHighlight', function (ev, seriesIndex, pointIndex, data) { var x = 'li:contains(DOG)'; $(x).css(\"display\",\"none\"); } );</script>");

answered Mar 14 '13 at 20:55

redolent

4,159
5
37
47

jQuery/Javascript - Variable into CSS change

3 Answers3