Search code examples
javascriptjqueryfunctionhref

Converting "document.getElementById" into jQuery


I've been thinking/searching for an equivalent of the problem that I am having below, and nothing could be found. Is there a way I can rewrite this to work with jQuery as an alternative?

First half of the code.

<a href="link.php?test=true" onclick="request(this)" target="_blank">

<a id="step2" href="javascript:alert('NOT FINISHED!');">

Second half of the code.

<script language="javascript">
var requests = 16;

function request(self)
{if(self.href != "#")
requests -= 1;

self.childNodes[0].src = "images/clear.gif";

if(requests === 0)
document.getElementById("step2").href = "next.php";}
</script>

Whereas I want to do a jQuery var request type thing. I want onclick="request(this) to work with my jQuery.


Solution

  • The answer to your question (title) is to replace

    document.getElementById('about').href = '#';
    

    with

    $('#about').attr('href','#');
    

    I have no idea if this will actually help you solve your problem, though, since I really don't know what you are trying to do. Based on your comments and code sample, it appears that you are trying to do some sort of wizard, but I have no idea how it would actually work given what you've posted.

    Update:

    Maybe something like:

    <a href="link.php?test=true" onclick="request(this)" target="_blank" class='request'></a>
    
    <a id="step2" href="next.php">Step 2</a>
    
    <script language="javascript">
        $(function() {
           var requests = 16;
           $('#step2').click( function() {
               alert('Not finished');
               return false;
           });
           $('.request').click( function() {
               var $this = $(this); // save jQuery reference to element clicked
    
               // swap indicator image source
               $this.find('img:first').attr('src','images/clear.gif');
    
               // if the number of flipped indicators equals the number of requests
               // remove the click handler from the step 2 link
               // this removes the alert and allows the user to proceed
               if ($('.request img[src="images/clear.gif"]').length == requests) {
                  $('#step2').unbind('click');
               }
    
               ...do something with the href for this request via ajax???
    
               // replace this handler with one that simply returns false
               // and remove the href since we're done with this request
               $(this).unbind('click').attr('href','#').click( function() { return false; } );
    
                // stop the default action for the request
               return false;
        });
    </script>