创建一个带有链接的教程,该链接将用户带到下一个指针

时间:2014-09-25 14:43:46

标签: jquery arrays hyperlink

我正在为我的用户创建一个弹出窗口的教程,它指导用户如何使用该网站:

enter image description here

指针位于数组中:

var wp_button_pointer_array = new Array();
wp_button_pointer_array[1] = {
    'element' : 'title',
    'options' : {
        'content': 'Here is how to do this... <a href="#" id="wp-button-pointer" class="wp-button-pointer-open-next">Next</a>', 
        'position': {'edge': 'top', 'align': 'center'} 
    } 
}; 
wp_button_pointer_array[2] = { 
    'element' : 'excerpt', 
    'options' : { 
        'content': 'Here is how to do this... <a href="#" id="wp-button-pointer" class="wp-button-pointer-open-next">Next</a>', 
        'position': {'edge': 'top', 'align': 'center'} 
    }
};

这是jQuery代码:

jQuery(document).ready( function($) {

    jQuery('.wp-button-pointer-open-next').click(function(e) {
        e.preventDefault();
        if(typeof(jQuery().pointer) != 'undefined') { // make sure the pointer class exists

            if(jQuery('.wp-pointer').is(":visible")) { // if a pointer is already open...
                var openid = jQuery('.wp-pointer:visible').attr("id").replace('wp-pointer-',''); // ... note its id
                jQuery('#' + wp_button_pointer_array[openid].element).pointer('close'); // ... and close it
                var pointerid = parseInt(openid) + 1;
            } else {
                var pointerid = 1; // ... otherwise we want to open the first pointer
            }

            if(wp_button_pointer_array[pointerid] != undefined) { // check if next pointer exists
                jQuery('#' + wp_button_pointer_array[pointerid].element).pointer(wp_button_pointer_array[pointerid].options).pointer('open');   // and open it
                var nextid = pointerid + 1;
                if(wp_button_pointer_array[nextid] != undefined) { // check if another next pointer exists
                    jQuery('#wp-pointer-' + pointerid + " .wp-pointer-buttons").append('Next'); // and if so attach a "next" link to the current pointer
                }
            }
        }
    });
});

每当用户单击类wp-button-pointer-open-next的链接时,弹出指针应该更改为数组中的下一个指针。但是,它并没有改变。我做错了什么?

编辑:问题可能在于链接:

<a href="#" id="wp-button-pointer" class="wp-button-pointer-open-next">Next</a>

我是否需要在那里的某处添加指针的ID?

1 个答案:

答案 0 :(得分:1)

所有指针锚似乎都具有相同的id,这使得无法使用JavaScript / jQuery正确访问它们。尝试用最后一个增加的计数器给它们id(#wp-pointer-1,#wp-pointer-2等等)。因为数组中锚点的html都具有相同的id,所以jQuery无法对其进行过滤并使用它来获取下一个数组项。

此外,id不包含“wp-pointer-”,它们包含“wp-button-pointer”。