如何更改div容器的類別？

Question

我有分頁一個新的問題：類容器的改變

.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"); 
}); 

它可以正確處理所有容器不首先

<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代碼。當我的頁面被創建時，第一頁被選中。當點擊「2」時，「1」很簡單，選擇「2」。所有沒有「1」的容器也是如此：如果我點擊「2」（或其他），那麼我不能先點擊！ 「1」改變它的視圖，但不會改變行爲，因爲簡單的容器是可點擊的，並且選擇的容器是不可點擊的！

Answer 1

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 2

這是因爲您只選擇那些在開始時具有此類的$(".page_button")，並且因爲稍後設置了.page_button，處理程序將不會執行。

你會想用 '活'，或在較新的jQuery的版本中， '開' 的功能

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

Answer 3

如何：

$(".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總是擁有class .page_button，並且選中的兩個類都是.page_button.selected。然後可以應用以下內容。

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

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"); 
});