如何更改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"); 
});