将jQuery ID作为参数传递给JavaScript函数

Question

Javascript

function changeInitial(init,alter)
{   
<!--alert(alter);-->

init.parent().hide();
alter.parent().show();
}

---

Html

<div class="form_item">
   <div class="form_label">
         <label>Account</label>
   </div>
   <span id="new_ac">
       <input type="text"/>
       <a id="create_ac" onclick ='changeInitial($("#create_ac, #select_ac"));'>
           Select Existing Account
       </a>
   </span>
   <span id="existing_ac">
       <select>
         <option>Select an account</option>
         <option>Customer</option>
         <option>Competitor</option>
         <option>Investor</option>
         <option>Partner</option>
         <option>Reseller</option>
         <option>Supplier</option>
       </select>
       <a id="select_ac">Create new Account</a>
    </span>
</div>

---

Firebug keeps telling me that "alter" is undefined. Please is there something I am missing? "init" is working fine.

Answer 1

In your "changeInitial(...)" call in your HTML, change to this:

onclick='changeInitial($("#create_ac"), $("#select_ac"));'

The way you are doing it, you are only specifying a single parameter.

Answer 2

should be:

onclick ='changeInitial($("#create_ac"),$("#select_ac"));'

otherwise it's just one jquery object.

Answer 3

Why are you using onclick?

Use jquery instead:

$(document).ready(function() {
    $('#create_ac').click(function(){
        changeInitial($("#create_ac"), $('#select_ac'));
    });
});

   function changeInitial(init,alter)
{   
    <!--alert(alter);-->

    init.parent().hide();
    alter.parent().show();
}

check out my example here - http://jsfiddle.net/ajthomascouk/qqksd/

UPDATE

$(document).ready(function() {
    $('#create_ac').click(function(){
        changeInitial($("#create_ac"), $('#select_ac'));
    });
    $('#select_ac').click(function(){
        changeInitial($("#select_ac"), $('#create_ac'));
    });
});

Updated fiddle

UPDATE 2

$(document).ready(function() {
    $('a').click(function(){
        changeInitial($(this).attr('id'), $('#select_ac'));
    });
});

Answer 4

• DEMO: http://jsbin.com/ehumu4/4 (Updated)

$(function(){
  $('span a').click(function(){ //work with pairs just like an accordion
    $(this).parent(':visible').hide().siblings().show();
  });
});

---

<!-- you should use classe's instead of id's -->
<span><a href="#" class="select_ac">Create new Account</a></span>
<span><a href="#" class="create_ac">Select Existing Account</a></span>

---

 .existing_ac {display:none } /* hidden at page load */