Modify jquery code to be HTML 5 compliant, using data-paramters

I have a jquery code which takes everything inside a span class and places a link to my affiliate instead of it. Here is the code:

This is the span class:

<span class="affiliate" title="mytitle" campaign="mycampaign">Join</span>

This is the jquery:

// Function for rendering affiliate links in a way that won't pass PageRank.
function affiliateLinks(){

// Declare local variables.
    var theURL, theAnchorText, theTitle;

// Declare the variable "spans" as the collection of all <span> elements.
    var spans = document.getElementsByTagName('span');

// Perform the following steps for every <span> element.
    for (var i = 0; i<spans.length; i++){

// If the <span> element is part of the "affiliate" class...
        if (hasClass(spans[i], 'affiliate')){

// Use the content between the <span> tags as our affiliate link's anchor text.
// Example: <span class="affiliate" title="Affiliate Site">this will be our anchor text</span>
// The content doesn't have to b开发者_StackOverflowe just text; it can be HTML too.
// Example: <span class="affiliate" title="Affiliate Site"><img src="/banners/affiliate-logo.png" /></span>
            theAnchorText = spans[i].innerHTML;

// Get the value of the <span> element's title attribute, make it lowercase, and remove whitespace
// characters from the beginning and end.
            theTitle = spans[i].title;

            campaign = spans[i].campaign;

            theURL = 'http://www.test.com/dir/' + theTitle + '?psid=testcampaign_id=' + campaign + '';

// Insert the new affiliate link into its corresponding <span> element and copy the <span> element's
// CSS classes (all of them) into the affiliate link's <a> tag.
            spans[i].innerHTML = '<a href="' + theURL + '" target="_blank" class="' + spans[i].className + '">' + theAnchorText + '</a>';

// Remove the title attribute from the <span> element, to prevent Firefox from displaying it in a tooltip.
            spans[i].removeAttribute('title');
        }

Thank you;) } }

How can i modify my jquery this code if I want to use HTML 5 and use data parameters. Instead of campaing and title I'll have data-title and data-campaign?

<span class="affiliate" data-title="mytitle" data-campaign="mycampaign">Join</span>

Tried doing this in my Jquery but it does not work:

theTitle = spans[i].data-title;

campaign = spans[i].data-campaign;

Thank you

Actually newer versions of jQuery save all data- attributes into the data object (demo), so just do this:

var data = $('span:eq(' + i + ')').data(),
    title = data.title,
    campaign = data.campaign;

Update: Make sure you include jQuery, add this to your page's head section

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

So this would be your "jQuerified" code:

// Function for rendering affiliate links in a way that won't pass PageRank.
function affiliateLinks(){

    // Declare local variables.
    var theData, theSpan, theURL, theAnchorText, theTitle, theCampaign;

    // Declare the variable "spans" as the collection of all <span> elements.
    var spans = $('span.affiliate');

    // Perform the following steps for every <span> element.
    for (var i = 0; i<spans.length; i++){
        theSpan = spans.eq(i);
        theData = theSpan.data();

        // Use the content between the <span> tags as our affiliate link's anchor text.
        // Example: <span class="affiliate" title="Affiliate Site">this will be our anchor text</span>
        // The content doesn't have to be just text; it can be HTML too.
        // Example: <span class="affiliate" title="Affiliate Site"><img src="/banners/affiliate-logo.png" /></span>
        theAnchorText = theSpan.html();

        // Get the value of the <span> element's title attribute, make it lowercase, and remove whitespace
        // characters from the beginning and end.
        theTitle = $.trim( theData.title.toLowerCase() );

        theCampaign = theData.campaign;

        theURL = 'http://www.test.com/dir/' + theTitle + '?psid=testcampaign_id=' + theCampaign + '';

        // Insert the new affiliate link into its corresponding <span> element and copy the <span> element's
        // CSS classes (all of them) into the affiliate link's <a> tag.
        theSpan
            .html('<a href="' + theURL + '" target="_blank" class="' + spans[i].className + '">' + theAnchorText + '</a>')

            // Remove the title attribute from the <span> element, to prevent Firefox from displaying it in a tooltip.
            .removeAttr('title');
    }
}

You can't put data-title as a property name like that because hyphens aren't allowed. The best way to do it with jQuery is:

theTitle = $(spans[i]).data('title');

which will use the data- attributes if you're using the latest version of jQuery.