Question

我试图学习分页，但我不知道为什么“ul”下的“li”内容消失了，为什么“ul”容器仍然继续出现甚至强硬我在js中说只有6应该只能在页面中看到。顺便说一句，“ul”和“li”在php中处于while循环之下。

是因为我的设计还是我的HTML结构？我怎么把东西输入js？或者我是如何创造整个事物的？ result resultnotblack

提前致谢

pageSize = 6;

$(function() {
  var pageCount = Math.ceil($(".job").size() / pageSize);

  for (var i = 0; i < pageCount; i++) {
    if (i == 0)
      $("#pagination").append('<li><a class="current" href="#">' + (i + 1) + '</a></li>');
    else
      $("#pagination").append('<li><a href="#">' + (i + 1) + '</a></li>');
  }


  showPage(1);

  $("#pagination li a").click(function() {
    $("#pagination li a").removeClass("current");
    $(this).addClass("current");
    showPage(parseInt($(this).text()))
  });

})

showPage = function(page) {
  $(".job").hide();

  $(".job").job(function(n) {
    if (n >= pageSize * (page - 1) && n < pageSize * page)
      $(this).show();
  });
}

.job-list-container {
  border-radius: 25px;
  background-color: rgba(255, 255, 255, 0.3);
  width: 85%;
  height: 85%;
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* display of flex */

.single-job-container {
  margin-top: .7%;
  margin-bottom: .8%;
  height: 30%;
  width: 45%;
  font-size: 1.1em;
  background-color: black;
  list-style: none;
  margin-right: 2.5%;
  margin-left: 2.5%;
  border-radius: 25px;
}

.job p {
  text-align: left;
  padding: 0px;
  margin-left: 10%;
  margin-bottom: 3px;
}

.job {
  margin-bottom: 3px;
  margin-top: 3px;
}

.job .trabaho {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1.3em;
}


/* javascipt pagination */

.current {
  color: green;
}

#pagination li {
  display: inline-block;
}

    <section class='jobs-container'> 
     <ul id="pagination"></ul>
            <div class='job-list-container'>

                    <?php
                        $sql = "SELECT * FROM available_jobs";
                        $result = mysqli_query($connect, $sql);
                        while ($row = mysqli_fetch_assoc($result)):
                        $pre = $row['Prefecture'];
                        $city = $row['City']; 
                        $company = $row['Company'];
                        $job= $row['JobName'];
                        $salary =$row['Salary'];
                        $time =$row['WorkTime']; ?>
                        <ul class="single-job-container">
                            <li class='job'>
                            <p>Time: <?php echo $time ?></p>
                            <p class='trabaho'> <?php echo $job ?></p> 
                            <p>Prefecture: <?php echo $pre ?> </p>
                            <p>City: <?php echo $city ?> </p> 
                            <p>Company: <?php echo $company?> </p>  
                            <p>Salary: <?php echo $salary ?> </p> 

                            </li>
                        </ul>
                    <?php endwhile; ?>


            </div>
        </section>

Answer 1

我明白了！

＆＃13;

pageSize = 6;

$(function() {
  var pageCount = Math.ceil($(".single-job-container").size() / pageSize);

  for (var i = 0; i < pageCount; i++) {
    if (i == 0)
      $("#pagination").append('<li><a class="current" href="#">' + (i + 1) + '</a></li>');
    else
      $("#pagination").append('<li><a href="#">' + (i + 1) + '</a></li>');
  }


  showPage(1);

  $("#pagination li a").click(function() {
    $("#pagination li a").removeClass("current");
    $(this).addClass("current");
    showPage(parseInt($(this).text()))
  });

})

showPage = function(page) {
  $(".single-job-container").hide();

  $(".single-job-container").each(function(n) {
    if (n >= pageSize * (page - 1) && n < pageSize * page)
      $(this).show();
  });
}

＆＃13;

但如果$（＆＃39; job＆＃39;）。每个都不是JQuery那么为什么会运行？

＆＃13;

//Pagination
pageSize = 8;

$(function() {
  var pageCount = Math.ceil($(".line-content").size() / pageSize);

  for (var i = 0; i < pageCount; i++) {
    if (i == 0)
      $("#pagin").append('<li><a class="current" href="#">' + (i + 1) + '</a></li>');
    else
      $("#pagin").append('<li><a href="#">' + (i + 1) + '</a></li>');
  }


  showPage(1);

  $("#pagin li a").click(function() {
    $("#pagin li a").removeClass("current");
    $(this).addClass("current");
    showPage(parseInt($(this).text()))
  });

})

showPage = function(page) {
  $(".line-content").hide();

  $(".line-content").each(function(n) {
    if (n >= pageSize * (page - 1) && n < pageSize * page)
      $(this).show();
  });
}

＆＃13;

.current {
  color: green;
}

#pagin li {
  display: inline-block;
}

＆＃13;

<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

		<link rel="stylesheet" type="text/css" href="trial.css">
		<script src="trial.js"></script>


	</head>
	<body>
 <ul>		
<li class="line-content">1 I have some content</li>
<li class="line-content">2 I have some content</li>
<li class="line-content">3 I have some content</li>
<li class="line-content">4 I have some content</li>
<li class="line-content">5 I have some content</li>
<li class="line-content">6 I have some content</li>
<li class="line-content">7 I have some content</li>
<li class="line-content">8 I have some content</li>
<li class="line-content">9 I have some content</li>
<li class="line-content">10 I have some content</li>
<li class="line-content">11 I have some content</li>
<li class="line-content">12 I have some content</li>
</ul>

<ul id="pagin">
         
</ul>


	</body>
</html>

＆＃13;

＆＃13; .job是保留字吗？

为什么不出现<ul>的内容？

1 个答案: