Question

我希望有人可以帮助我，我想要做的是在while循环（来自mysql）生成的多个<div>中显示一个java-script元素。

我正在使用getElementById，但我知道getElementById元素只获得第一个<div> - 我不确定如何让它适用于所有<div>第

到目前为止，这是我的代码：

    <?php
    session_start();

     $server = '...';
     $user = '...';
     $pass = '...';
     $db = '...';

     // Connect to Database
     $result = mysql_connect($server, $user, $pass) 
     or die ("Could not connect to server ... \n" . mysql_error ());
     mysql_select_db($db) 
     or die ("Could not connect to database ... \n" . mysql_error ());


    // No session variable, red from mysql
    $result=mysql_query("select * from players");
    $time=mysql_fetch_array($result);
    $dateFormat = "d F Y -- g:i a";
    $targetDate = strtotime($time['time']);
    $_SESSION['targetDate'] = $targetDate;



    $actualDate = time();
    $secondsDiff = $actualDate - $targetDate;
    $remainingDay     = floor($secondsDiff/60/60/24);
    $remainingHour    = floor(($secondsDiff-($remainingDay*60*60*24))/60/60);
    $remainingMinutes = floor(($secondsDiff-($remainingDay*60*60*24)-         ($remainingHour*60*60))/60);
    $remainingSeconds = floor(($secondsDiff-($remainingDay*60*60*24)-    ($remainingHour*60*60))-($remainingMinutes*60));
    $actualDateDisplay = date($dateFormat,$actualDate);
    $targetDateDisplay = date($dateFormat,$targetDate);

    echo $actualDateDisplay;
    echo $targetDateDisplay;
    ?>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title>Untitled Document</title>
       <script type="text/javascript">
          var days = <?php echo $remainingDay; ?>  
          var hours = <?php echo $remainingHour; ?>  
          var minutes = <?php echo $remainingMinutes; ?>  
          var seconds = <?php echo $remainingSeconds; ?> 
          function setCountDown ()
          {
              seconds++;
              if (seconds > 60){
                 minutes++;
                 seconds = 0
              }
              if (minutes > 60){
                  hours++;
                  minutes = 0
              }
              if (hours > 6){
                  hours = 0
              }
              document.getElementsByClassName("remain") = "  "+hours+" hr "+minutes+" min    "+seconds+" sec";
              SD=window.setTimeout( "setCountDown()", 1000 );
              if (minutes == '00' && seconds == '00') { 
                  seconds = "00"; window.clearTimeout(SD);
                  window.location = "result.php"
              } 

           }
        </script>

    </head>
    <body onLoad="setCountDown();">

<?php
        while($row = mysql_fetch_array( $result )) {

        echo "<div class=\"remain\">";
        echo "$remainingHour h, $remainingMinutes min, $remainingSeconds s, ";
        echo "</div>";
        } 

?>

Answer 1

根据HTML标准，ID必须是唯一的：

http://www.w3.org/TR/html401/struct/global.html#h-7.5.2

尝试设置类，通过搜索将返回一个结果数组。然后你可以迭代这些！

编辑：使用document.getElementsByClassName();这里有点小提琴 https://jsfiddle.net/965zbf0m/

Answer 2

您是否有某种类型的选择器引擎可用...比如jQuery？

如果是这样，您可以使用类而不是ID（该组合将返回所选对象的数组）。

Answer 3

我认为你的问题就在于：

document.getElementsByClassName("remain") = "  "+hours+" hr "+minutes+" min    "+seconds+" sec";

document.getElementsByClassName将返回一组匹配元素。然后，您希望循环它们并相应地更新。我认为这应该可以解决问题：

var divs = document.getElementsByClassName("remain");
for (var i = divs.length - 1; i >= 0; i--) {
  divs[i].innerHTML = "  "+hours+" hr "+minutes+" min    "+seconds+" sec";
};

使用getElementById的多个元素

3 个答案: