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つ）をクリックすると、最初にクリックできなくなります。「1」はビューを変更しますが、動作は変更しません。これは、単純なコンテナーはクリック可能であり、選択したコンテナーはクリック可能ではないためです。

4

4 に答える 4

1

これは、最初にこのクラスを持つものだけを選択$(".page_button")し、後で .page_button を設定したため、ハンドラーが実行されないためです。

「ライブ」を使用するか、新しい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 の 2 つのクラス、または 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 に答える