jquery滑块：下一个按钮，上一个按钮和分页对象在滑动时显示两次

以下jquery代码的下一个和上一个按钮可以正常工作。当用户点击下一个按钮时，后续页面的内容会在contentcolumn div中滑动，而前一个按钮也会发生相同的情况。但是，contentcolumn会显示额外的下一个，上一个按钮和分页对象。所以，现在有2个下一个按钮，2个前面的按钮和2个分页对象。jquery滑块：下一个按钮，上一个按钮和分页对象在滑动时显示两次

我怎样才能让它只显示1个下一个按钮，1个上一个按钮和1个分页对象？

FYI，下按钮，前一个按钮和分页对象都是外contentcolumn.My代码：

$(document).ready(function(){ 
var pg=1; 
$("#contentcolumn:first").show("slide",{'direction':"left"},1000); 
$('#next').click(function() { 
    if(pg<10){ 
     pg=pg+1; 
     page_str="page="+pg; 
     $.get('index2.php',page_str,function(data) { 
      $('#contentcolumn').html(data).show("slide 

",{'direction':"left"},1000); 
      }); 
      // event.preventDefault(); 
      //return false; 
      }; 

    });//end $('#next').click 

    $('#prev').click(function(){ 
     if(pg>1){ 
      pg=pg-1 
      page_str="page="+pg; 
      $.get('index2.php',page_str,function(data){ 
       $('#contentcolumn').html(data).show("slide",{'direction':"right"},1000); 
      }); 
     }; 
    }); 

});//end document ready

的style.css

/* CSS Document */ 
body{ 
margin:0; 
padding:0; 
line-height: 1.5em; 
} 
b{font-size: 110%;} 
em{color: red;} 

#topsection{ 
background-color: #EAEAEA; 
height: 90px; /*Height of top section*/ 
} 

#topsection h1{ 
margin: 0; 
padding-top: 15px; 
} 

#contentwrapper{ 
float: left; 
width: 100%; 
/*z-index:0; 
*/} 

#contentcolumn{ 
margin: 0 200px 0 200px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/ 
float:left; 
} 

#leftcolumn{ 
float: left; 
width: 200px; /*Width of left column*/ 
margin-right:-200px; 
background-color: #C8FC98; 
} 

#rightcolumn{ 
float: left; 
width: 200px; /*Width of right column*/ 
margin-left: -200px; /*Set left marginto -(RightColumnWidth)*/ 
background-color: #FDE95E; 
} 

#footer{ 
clear: left; 
width: 100%; 
background: black; 
color: #FFF; 
text-align: center; 
padding: 4px 0; 
} 
#footer a{ 
color: #FFFF80; 
} 
.mycontent{ 
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/ 
margin-top: 0; 
} 
.innertube{ 
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/ 
margin-top: 0; 
} 


div.pagination { 
    padding: 3px; 
    margin: 3px; 
} 

div.pagination a { 
    padding: 2px 5px 2px 5px; 
    margin: 2px; 
    border: 1px solid #AAAADD; 

    text-decoration: none; /* no underline */ 
    color: #000099; 
} 
div.pagination a:hover, div.pagination a:active { 
    border: 1px solid #000099; 

    color: #000; 
} 
div.pagination span.current { 
    padding: 2px 5px 2px 5px; 
    margin: 2px; 
     border: 1px solid #000099; 

     font-weight: bold; 
     background-color: #000099; 
     color: #FFF; 
    } 
    div.pagination span.disabled { 
     padding: 2px 5px 2px 5px; 
     margin: 2px; 
     border: 1px solid #EEE; 

     color: #DDD; 
    }

PHP代码：

<div id="maincontainer"> 
    <div id="contentwrapper"> 
    <div id="leftcolumn"> 
    <div class="innertube"> 
    <form type="post"> 
    <input type="button" id="prev" value="<" /> 
    </form> 
    </div> 
    </div> 
    <div id="contentcolumn"> 
    <div class="innertube"> 
    <?php 
    $pagination=''; 
    if (function_exists("curl_init")){ 
     $ch=curl_init(); 
     curl_setopt($ch,CURLOPT_URL,"http://feeds.feedburner.com/rb286"); 
     curl_setopt($ch,CURLOPT_RETURNTRANSFER,1); 
     $data=curl_exec($ch); 
     curl_close($ch); 
     //print_r($data); 
     $doc=new SimpleXmlElement($data); 
     //$doc=simpleXml_load_file("http://feeds.feedburner.com/rb286?format=xml"); 
     //$doc=simpleXml_load_string($data); 
     $xml = simplexml_import_dom($doc);  
     if (!$xml) { 
     echo 'Error while parsing the document'; 
     exit; 
     } 

     //print_r($doc); 
     } 

     function paginateFunc($xml){ 
     global $pagination; 
     $disp_arr = array(); 
     $image_array=array(); 
     // How many adjacent pages should be shown on each side? 
      $adjacents =3; 

      $items=$xml->xPath('/rss/channel/item'); 
      $count=count($items); 
      $total_pages = $count; 

      /* Setup vars for query. */ 
      $targetpage = "index2.php";  //your file name (the name of this file) 
      $limit = 1;         //how many items to show per page 
      $page = $_GET['page']; 
      echo("page:".$page); 
      if($page) 
       $start = ($page - 1) * $limit;   //first item to display on this page 
      else 
       $start = 0;        //if no page var is given, set start to 0 


      /* Setup page vars for display. */ 
      if ($page == 0) $page = 1;     //if no page var is given, default to 1. 
      $prev = $page - 1;       //previous page is page - 1 
      $next = $page + 1;       //next page is page + 1 
      $lastpage = ceil($total_pages/$limit);  //lastpage is = total pages/items per page, rounded up. 
      $lpm1 = $lastpage - 1;      //last page minus 1 



      //echo("HALLO"); 
      foreach ($xml->xpath('//item/content:encoded') as $desc) { 
       preg_match_all('/(?<imgs><img[^>]+>)/m', $desc, $m); 
       /*foreach ($m['imgs'] as $img) { 
        echo("<img src='".$img."'/>"); 
        //array_push(image_array,$img); 
       } */ 
      } 
      // $image_array=$m['imgs']; 
      // print_r($image_array); 
        // 
      foreach($items as $key => $item){ 
         //if(($key >= $start) && ($key < $start + $limit)){ 
          $disp_array[$key]['link']=$item[0]->link; 
          $disp_array[$key]['title']=$item[0]->title; 
          $disp_array[$key]['desc']=$item[0]->description; 

      }//end foreach($items 


      foreach($disp_array as $key=>$disp){ 
        if($key == $start){ 

        //if(($key >= $start) && ($key < $start + $limit)){ 
         echo("key:".$key." start:".$start); 
         //echo("<div class='mycontent'>"); 
         echo("<a href='".$disp_array[$key]['link']."'>".$disp_array[$key]['title']."</a><br>"); 
         echo($disp_array[$key]['desc']); 
         //echo(count($m['imgs'])); 
         //echo("<img src='".$m['imgs'][$key]."'/>"); 
         //echo("</div>"); 
         } 

      } 
      echo("</div>");//end div innertube 
      echo("</div>");//end div contentcolumn 
      echo("<div id='rightcolumn'>"); 
      echo("<div class='innertube'>"); 
      echo("<form type='post'>"); 
      echo("<input type='button' id='next' value='>' />"); 
      echo("</form>"); 
      echo("</div>");//end div innertube 
      echo("</div>"); 
      echo("<div id='footer'>"); 
      /* 
       Now we apply our rules and draw the pagination object. 
       We're actually saving the code to a variable in case we want to draw it more than once. 
      */ 
      //$pagination = ""; 
      if($lastpage > 1) 
      { 
       $pagination .= "<div class=\"pagination\">"; 
       //previous button 
       if ($page > 1) 
        $pagination.= "<a href=\"$targetpage?page=$prev\">� previous</a>"; 
       else 
        $pagination.= "<span class=\"disabled\">� previous</span>"; 

       //pages 
       if ($lastpage < 7 + ($adjacents * 2)) //not enough pages to bother breaking it up 
       { 
        for ($counter = 1; $counter <= $lastpage; $counter++) 
        { 
         if ($counter == $page) 
          $pagination.= "<span class=\"current\">$counter</span>"; 
         else 
          $pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";     
        } 
       } 
       elseif($lastpage > 5 + ($adjacents * 2)) //enough pages to hide some 
       { 
        //close to beginning; only hide later pages 
        if($page < 1 + ($adjacents * 2))   
        { 
         for ($counter = 1; $counter < 4 + ($adjacents * 2); $counter++) 
         { 
          if ($counter == $page) 
           $pagination.= "<span class=\"current\">$counter</span>"; 
          else 
           $pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";     
         } 
         $pagination.= "..."; 
         $pagination.= "<a href=\"$targetpage?page=$lpm1\">$lpm1</a>"; 
         $pagination.= "<a href=\"$targetpage?page=$lastpage\">$lastpage</a>";  
        } 
        //in middle; hide some front and some back 
        elseif($lastpage - ($adjacents * 2) > $page && $page > ($adjacents * 2)) 
        { 
         $pagination.= "<a href=\"$targetpage?page=1\">1</a>"; 
         $pagination.= "<a href=\"$targetpage?page=2\">2</a>"; 
         $pagination.= "..."; 
         for ($counter = $page - $adjacents; $counter <= $page + $adjacents; $counter++) 
         { 
          if ($counter == $page) 
           $pagination.= "<span class=\"current\">$counter</span>"; 
          else 
           $pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";     
         } 
         $pagination.= "..."; 
         $pagination.= "<a href=\"$targetpage?page=$lpm1\">$lpm1</a>"; 
         $pagination.= "<a href=\"$targetpage?page=$lastpage\">$lastpage</a>";  
        } 
        //close to end; only hide early pages 
        else 
        { 
         $pagination.= "<a href=\"$targetpage?page=1\">1</a>"; 
         $pagination.= "<a href=\"$targetpage?page=2\">2</a>"; 
         $pagination.= "..."; 
         for ($counter = $lastpage - (2 + ($adjacents * 2)); $counter <= $lastpage; $counter++) 
         { 
          if ($counter == $page) 
           $pagination.= "<span class=\"current\">$counter</span>"; 
          else 
           $pagination.= "<a href=\"$targetpage?page=$counter\">$counter</a>";     
         } 
        } 
       } 

       //next button 
       if ($page < $counter - 1) 
        $pagination.= "<a href=\"$targetpage?page=$next\">next �</a>"; 
       else 
        $pagination.= "<span class=\"disabled\">next �</span>"; 
       $pagination.= "</div>\n";  
       } 

      } 


      if (isset($doc->channel)) paginateFunc($doc); 
      ?> 
      <?php 

     echo($pagination); 
     ?> 
     </div><!--closing tag for div footer--> 
     </div><!--closing tag for div contentwrapper--> 
     </div><!--closing tag for div maincontainer-->

来源

2012-07-27 vaanipala

当你点击'next'或'previous'时，你必须隐藏原来的#next，#previous，因为你正在返回这些bu tton从html响应。类似于

$.get('index2.php',page_str,function(data) { 
     $('#next').hide(); 
     $('#previous').hide(); 
     $('#contentcolumn').html(data).show("slide 

",{'direction':"left"},1000); 
     });

来源

2012-07-27 06:36:13

好吧，我试过丹博士的解决方案。原来的下一个和上一个按钮现在隐藏起来。但是，作为html响应而滑入的下一个和上一个按钮不起作用。当我点击下一页或上一页时，它不会进入下一页或上一页。 – vaanipala 2012-07-29 15:55:22

当我点击下一页或上一页时，它不会进入下一页或上一页。它保持在同一页面上。当我在Chrome中调试时，我注意到点击事件并不是全部触发。我也尝试更改下一个和上一个按钮的ID，即类。 .next和.prev。仍然点击事件不会触发。 – vaanipala 2012-07-29 16:44:45

拆分HTML和Ajax调用页面。在分配新值之前清除prev，next链接值。

来源

2012-07-27 06:45:05

我已经分离了html和ajax调用页面。 “在分配新值之前清除上一个，下一个链接值”是什么意思？ – vaanipala 2012-07-29 15:57:00

我的意思是，将html页面中的”按钮移动到ajax div（显示ajax内容的div）。用新内容替换ajax div，显示早期的按钮。 – 2012-07-30 08:08:14

对于像我这样的人，浪费了很多天研究网上的abt jquery滑块.....我终于找到了这个用于滑块初学者的好教程。检查出来.. http://jc-designs.net/blog/2010/03/jquery-slider-tutorial-for-beginners-how-i-did-mine/comment-page-1/#comment-23934

来源

2012-07-31 05:09:59 vaanipala

jquery滑块：下一个按钮，上一个按钮和分页对象在滑动时显示两次

回答

相关问题