jQuery / Javascript - CSS变化的变量

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.

Answer 1

You need to add # symbol before x .

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

Or, where you declare x :

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

Answer 2

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>");

Answer 3

您缺少DOG选择器：

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