如何访问通过JavaScript函数传入的变量

Question

I have the following button setup:

<div class="BlogManagementDiv">
     <button type="button" onclick="fnToggleBox(AddcategoryDiv)">Add Category</button>                                                    
        <div id="AddcategoryDiv" class="BlogManagementcontainer">
...
        </div>
</div> 

Note the onclick does this:

fnToggleBox(AddcategoryDiv)

Where it is passing in a reference to the div below:

AddcategoryDiv

I then access the element in the funciton like this:

    function fnToggleBox(element) 
    {
        if (!$('#'+element.id).is(":visible")) {
            $('#' + element.id).show();
        }
        else {
            $('#' + element.id).hide();
        }
    }

which I can see is completeley ridiculous, as it already has the element, and there is no need to acces it in this way.

My question is, how to properly access this variable using JQuery.

I know how to do using JavaScript, but am trying to do so using JQuery.

I have tried:

function fnToggleBox(element) 
    {
        if (!element).is(":visible")) {
            element.show();
        }
        else {
            element.hide();
        }
    }

and

function fnToggleBox(element) 
    {
        if (!$element).is(":visible")) {
            $element.show();
        }
        else {
            $element.hide();
        }
    }

but they do not work.

I have googled, but cannot find the answer.

Answer 1

Description
You simply need to wrap the element to access the DOM.

<button type="button" onclick="fnToggleBox(AddcategoryDiv)">Add Category</button>                                                    

Solution
I believe you are looking to simply .toggle the visibility. You can do this via the .toggle() function in jQuery.

Like so:

function fnToggleBox(element) 
{
  $(element).toggle();
}

Which isn't really worth writing a function wrapper for, but enjoy!

---

Documentation

http://api.jquery.com/toggle/

Description: Display or hide the matched elements.
.toggle( [duration ] [, complete ] )

Answer 2

jquery wraps dom elements in the $ Jquery function, once these dom elements are wrapped you get all those nice jquery methods but the underlying dom element remains,

you are close , just pass the node to the $ function as argument:

 function fnToggleBox(element) { console.log(element) console.log($(element)) console.log($('#' + element.id)[0] === element) if (!$(element).is(":visible")) { $(element).show(); } else { $(element).hide(); } } 

 #AddcategoryDiv{ height:10px; width:10px; background:red } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="BlogManagementDiv"> <button type="button" onclick="fnToggleBox(AddcategoryDiv)">Add </button> <div id="AddcategoryDiv" class="BlogManagementcontainer"> </div> </div>