Question

我有一个新的分页问题：

<br><b>Page:</b><br/>
<?php
  for($i=0; $i<$count; $i++)
  {
    if ($i==0)
    {
      echo "<div class='selected_page_button'>".($i+1)." "."</div>";
    }
    else
    {
      echo "<div class='page_button'>".($i+1)." "."</div>";
    }
  }
?>

CSS代码：

.page_button {
  height:20px;
  width:15px;
  padding-left:4px;
  padding-right:4px;
  display:block;
  float:left;
  border:2px solid #000000;
  margin-right:4px;
  text-decoration:none;
  text-align:center;
  cursor: pointer;
}

.selected_page_button {
  color : #FFFFFF;
  height:20px;
  width:15px;
  padding-left:4px;
  padding-right:4px;
  display:block;
  float:left;
  margin-right:4px;
  text-decoration:none;
  text-align:center;
  background:#0088cc;
  border:2px solid #000000;
}

用于更改容器类的代码：

$(".page_button").click(function () {
  $(".selected_page_button").attr("class", "page_button");
  $(this).attr("class", "selected_page_button");
});

它可以在没有第一个容器的情况下正常运行。创建页面后，将选择第一页。当我点击“2”时，“1”很简单，选择“2”。同样的事情是没有“1”的所有容器：如果我点击“2”（或其他），那么我不能先点击！ “1”更改了它的视图但不改变行为，因为简单容器是可点击的，并且所选容器不可点击！

Answer 1

这是因为你只选择那些在开头有这个类的$(".page_button")因为你以后设置了.page_button，所以处理程序不会被执行。

你想要使用'live'，或者在较新的jQuery版本中使用'on'函数

$(".page_button").on("click", function(event){
    $(".selected_page_button").attr("class", "page_button");
    $(this).attr("class", "selected_page_button");
});

Answer 2

怎么样：

$(".page_button").live("click",function () {
    $(".selected_page_button").removeClass("selected_page_button").addClass("page_button");
    $(this).removeClass("page_button").addClass("selected_page_button");
});

但是，我建议稍微改写一下，你有两个类.page_button和.selected或其他一些命名，其中div总是有类.page_button而且selected都有类.page_button.selected。然后可以应用以下内容。

$(".page_button").live("click",function(){
    $(".page_button").removeClass("selected");
    $(this).addClass("selected");
});

Answer 3

jcubic对他的解决方案是正确的，但不是他的实现。您需要确保事件绑定到所有page_buttons，页面加载时存在的那些以及稍后出现的那些。

jQuery的'on'和'live'功能可以实现这一目标。这些函数将侦听器绑定到容器元素并等待事件冒泡到它们，这样即使稍后添加了page_button，事件仍然会触及侦听容器。

以下是这些功能的正确实现：

$('#paginationLinkContainer').on('click','.page_button',function() {
    $('.selected_page_button').attr('class','page_button');
    $(this).attr('class','selected_page_button');
});

在此块中，侦听器绑定到容器（您可能需要添加到标记中）和过滤器，以便仅在事件源从'.page_button'冒泡时才执行。

对于旧版本的jQuery

$('.page_button').live('click',function() {
    $('.selected_page_button').attr('class','page_button');
    $(this).attr('class','selected_page_button');
});

Answer 4

以下是我提供更好解决方案的代码：

<br><b>Page:</b><br/>
<?php
  for($i=0; $i<$count; $i++)
  {
    if ($i==0)
    {
      echo "<div class='page_button selected'>".($i+1)." "."</div>";
    }
    else
    {
      echo "<div class='page_button'>".($i+1)." "."</div>";
    }
  }
?>

CSS代码：

.page_button {
  height:20px;
  width:15px;
  padding-left:4px;
  padding-right:4px;
  display:block;
  float:left;
  border:2px solid #000000;
  margin-right:4px;
  text-decoration:none;
  text-align:center;
  cursor: pointer;
}

.selected {
  color : #FFFFFF;
}

用于更改容器类的代码：

$(".page_button").click(function () {
  $(".page_button").removeClass("selected");
  $(this).addClass("selected");
});

如何更改div容器的类？

4 个答案: