Question

我有链接到页面顶部显示的数据页面。我也将它克隆到页面底部。问题在于尝试删除活动页面的href属性。这适用于顶行链接，但不适用于底部。

<div class="pages"></div>

<div id="workspace"><br/></div>

<div id="pagesclone"></div>

jquery的：

//Generate page number links
for (x = 1; x < 6; x++) {
    $('.pages').append(' <a href="#" class="links">' + x + '</a> ');    
}

page = 1;

//Function for link clicks
$('.links').click(function() {
    //"You clicked .."
   current = $(this).html();
   $('#workspace').html('You clicked ' + current);

    //shifting the active page    
   $('.links').slice(page - 1, page).attr('href', '#'); //activate preceeding link
   page = $(this).html(); //reset page number to the link clicked
   $('.links').slice(page - 1, page).removeAttr('href'); //remove href attribute
});


//Clone the top row of links to the bottom
$('.pages').clone(true, true).appendTo('#pagesclone');

一切看起来都对我不对。如何让下页上的克隆链接在点击时删除href属性，反之亦然？

Jsfiddle：http://jsfiddle.net/JshnC/10/

Answer 1

主要问题是您的page索引仅指向第一行的元素。如果你加上$（“。links”）长度的一半，你就得到了第二行元素的索引，你可以使它工作。

在http://jsfiddle.net/dLKfA/

采用这种方法有一个有效（但很难看）的版本

如果引入some more classes：

，您可以使代码更好

生成时：

$('.pages').append(' <a href="#" class="links link-' + x + '">' + x + '</a> ');

然后更新：

$('.links.link-' + page).attr('href', '#'); //activate preceeding link
page = $(this).html(); //set page number to the link clicked
$('.links.link-' + page).removeAttr('href'); //remove href attribute

但是，@ elclanrs对全局变量的评价也是如此。他们很可能在某些时候咬你。

Answer 2

这可能不是效率最高here is one way：

var link = [1, 2, 3, 4, 5];

$.each(link, function(a) {
    $(".pages").append("<a href='#' class='a" + a + "'>" + link[a] + "</a>");
});

$("a").click(function() {
    $("." + $(this).attr('class')).removeAttr("href");
});

JQuery克隆链接的不稳定行为

2 个答案: