Question

我有一个jquery代码，它将所有内容都放在span类中，并将链接放到我的会员而不是它。这是代码：

这是跨度类：

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

这是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 be 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');
        }

谢谢;） } }

如果我想使用HTML 5并使用数据参数，我如何修改我的jquery这段代码。我没有活动和头衔，而是会有数据标题和数据广告？

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

尝试在我的Jquery中执行此操作，但它不起作用：

theTitle = spans[i].data-title;

campaign = spans[i].data-campaign;

谢谢

Answer 1

实际上，较新版本的jQuery将所有data-属性保存到数据对象（demo）中，所以只需这样做：

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

更新：确保包含jQuery，将其添加到页面的主题部分

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

所以这将是你的“jQuerified”代码：

// 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');
    }
}

Answer 2

您不能将data-title作为属性名称，因为不允许使用连字符。使用jQuery的最佳方法是：

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

如果您使用的是最新版本的jQuery，它将使用data-属性。

使用数据参数将jquery代码修改为HTML5兼容

2 个答案: