用jQuery编写JavaScript并使用变量

Question

As a javascript newbie, I am struggling to use a script with a variable that runs a bit of JQuery (and also struggling to use the right language here, I'm sure!)

The action I want to happen is to change the CSS class of a specific div, eg #det90, for which I have the following code (I have used the same on a $(window).load(function() and it works on a different set of divs):

$("#MYDIVIDHERE").switchClass("sdeth","sdet",50);

So I wrote the following:

<script type="text/javascript">
    $(function revealCode(divID) {
        $("#divID").switchClass("sdeth","sdet",50);
    })
</script>

and called it from an anchor with:

onClick="revealCode('det90');"

I think the problem is that I don't know how to write the script and pass the variable in the brackets (divID) to the next line (where I've got "#divID"). Any help or pointers to tutorials gratefully received!

Solution

Thanks to all, but particularly to Caleb. I've scrapped the general function and the onClick, added an ID to the anchor and inserted the following for that anchor (and then repeated that for each anchor/div combination I want to use it on ... and it works :D

$("#linkID").click(function() {
    $("#divID").switchClass("sdeth","sdet",50);
});

Answer 1

Don't quote your variable name. Just quote the "#" prefix.

<script type="text/javascript">
    $(function revealCode(divID) {
        $("#" + divID).switchClass("sdeth","sdet",50);
    })
</script>

Answer 2

Change to:

<script type="text/javascript">
   function revealCode(divID) {
        $("#" + divID).switchClass("sdeth","sdet",50);
    }
</script>

You don't need $() around the function

$("#divID") will look for an element with the ID divID , and not what was specified in your function parameter

Answer 3

Change your code to: onClick="revealCode('#det90');"

$(function revealCode(selector) {
    $(selector).switchClass("sdeth","sdet",50);
})

jQuery is powered by "selectors" -- similar to CSS syntax.

Answer 4

This won't work. revealCode is local to that scope and not known outside. Also, you're not using the argument you've passed into your handler.

If you're using jQuery, use it to bind to the handler as well like this:

jQuery(document).ready(function() {    
    function revealCode(divID) {
        $("#" + divID).switchClass("sdeth","sdet",50);
    }

   jQuery("#divID").click(function() {
        revealCode('det90');
   });    
});

Answer 5

Move your onclick event handler attachment into javascript code. You should try not to mix your functional code with your html.

Anonymous version:

$('#myDiv').click(function () {
    $(this).switchClass("sdeth","sdet",50);
});

Normal version:

var myFunction = function (element) {
    $(element).switchClass("sdeth","sdet",50);
};

$('#myDiv').click(myFunction, {element: this});