1

我有一个新的分页问题：

<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”会改变它的视图但不会改变行为，因为简单容器是可点击的，而选定的容器是不可点击的！

4

4 回答 4

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");
});
于 2012-07-10T13:34:57.110 回答
0

怎么样：

$(".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 并且选定的类具有两个类 .page_button.selected。然后可以应用以下内容。

$(".page_button").live("click",function(){
    $(".page_button").removeClass("selected");
    $(this).addClass("selected");
});
于 2012-07-10T13:39:30.543 回答
0

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');
});
于 2012-07-10T13:47:57.310 回答
0

这是我的代码以获得更好的解决方案：

<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");
});
于 2012-07-10T13:56:49.900 回答