2015-10-20 70 views
-2

我需要爲學校創建一個數據庫。當我在我的專欄「冠軍」中懸停一個對象時,我想向用戶展示左側冠軍的照片。我想用Jquery來做這件事。我在網上搜索過,但我找不到答案。這裏是我的腳本:我如何在PHP中使用jquery

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="stijl.css"> 
    </head> 
    <body>  
     <?php  
      echo '<aside id="links"><p id="Aatrox"><img src="http://eindwerkstef.be/php/champions/Aatrox.jpg"/><p></aside>'; 
      echo '<form action="php54.php" method="post">'; 
      echo '<aside>'; 
      echo '<select name="sorteren"><option value="Champion">Champion</option><option value="Role">Role</option><option value="Lane">Lane</option><option value="Counter">Counter</option></select>'; 
      echo '<select name="sorteren2"><option value="Champion">Champion</option><option value="Role">Role</option><option value="Lane">Lane</option><option value="Counter">Counter</option></select>'; 
      echo '</br><input type="submit" name="submit" value="Sorteer!"/>'; 
      echo '</br><p>Wat wilt u Weergeven?</p>'; 
      echo '<select name="toonL"><option value="Top">Top</option><option value="Mid">Mid</option><option value="Jungle">Jungle</option><option value="Bottom">Bottom</option></select>'; 
      echo '<input type="submit" name="toon1" value="Toon"/>'; 
      echo '</aside>'; 

      mysql_connect('xxx','xxx','xxx'); 
      mysql_select_db('xxx'); 

      if (isset($_POST['submit'])){ 
       $query= "SELECT * FROM lolOverzicht ORDER BY {$_POST['sorteren']}, {$_POST['sorteren2']}"; 
       $res=mysql_query($query); 
       echo "<table border='1' id='tbloverzicht'><tr><td><b>Champion</td><td><b>Role</td><td><b>Lane</td><td><b>Counter</td></tr>"; 

       while ($row=mysql_fetch_array($res)){ 
        echo "<tr><td><p>".$row['Champion']."</p></td><td>".$row['Role']."</td><td>".$row['Lane']."</td><td>".$row['Counter']."</td><td><a href=\"lolwijzig.php?id={$row['Nummer']}\">Wijzig</a></td><td><a href=\"lolverwijder.php?id={$row['Nummer']}\">Verwijder</a></td></tr>"; 
       } 
       echo "</table>"; 
      } 

      if (isset($_POST['toon1'])){ 
       $query= "SELECT * FROM lolOverzicht WHERE Lane = '{$_POST['toonL']}' ORDER BY {$_POST['sorteren']}, {$_POST['sorteren2']}"; 
       $res=mysql_query($query); 
       echo "<table border='1' id='tbloverzicht'><tr><td><b>Champion</td><td><b>Role</td><td><b>Lane</td><td><b>Counter</td></tr>"; 

       while ($row=mysql_fetch_array($res)){ 
        echo "<tr><td>".$row['Champion']."</td><td>".$row['Role']."</td><td>".$row['Lane']."</td><td>".$row['Counter']."</td><td><a href=\"lolwijzig.php?id={$row['Champion']}\">Wijzig</a></td><td><a href=\"lolverwijder.php?id={$row['Champion']}\">Verwijder</a></td></tr>"; 
       } 
       echo "</table>"; 
      } 
      echo "</table>";   
      mysql_close(); 
     ?> 

     <script src="script/jquery-1.11.1.min.js" type="text/javascript"> 
      $(document).ready(function(){ 
       $('img').on('mouseover', function(){ 
        $(this).fadeTo('fast', 1.0); 
       }); 
       $('img').on('mouseout', function(){ 
        $(this).fadeto('slow', 0.4); 
       }); 
      }); 
     </script>  
    </body> 
</html> 
+0

在那使用AJAX。從數據庫服務器請求數據。 – aldrin27

+1

jQuery是JavaScript並且在客戶端上運行。 PHP是服務器端語言,只有當客戶端(瀏覽器)向服務器發出請求時才運行。其中一個請求是初始頁面加載,當您鍵入url並按Enter時。之後,您可以執行JavaScript/jQuery的AJAX請求到服務器以收集特定信息。如果您在搜索中包含AJAX,則應該找到大量結果。 – GolezTrol

+0

以及你需要AJAX請求到數據庫http://www.w3schools.com/ajax/ –

回答

0

首先,我看到你有點困惑。

PHP是一個server-side編程語言;這意味着在將頁面發送到客戶端(瀏覽器)之前,所有PHP代碼都在服務器上呈現。

jQuery是一個JavaScript類旨在簡化JavaScript腳本/編程; JavaScriptclient-side腳本/編程語言,這意味着任何JavaScript/JQuery代碼在客戶端(瀏覽器,我們可以說)執行。

好了,現在你的問題。如果你想顯示在一組細胞/列的鼠標懸停事件的圖像,你可以做這樣的事情:

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="stijl.css"> 
</head> 
<body>  
     <!-- the following code does not need PHP, so just leave it as HTML --> 
     <aside id="links"> 
      <p id="Aatrox"> 
       <img src="http://eindwerkstef.be/php/champions/Aatrox.jpg"/> 
      <p> 
     </aside> 
      <form action="php54.php" method="post"> 
       <aside> 
        <select name="sorteren"> 
         <option value="Champion">Champion</option> 
         <option value="Role">Role</option> 
         <option value="Lane">Lane</option> 
         <option value="Counter">Counter</option> 
        </select> 
        <select name="sorteren2"> 
         <option value="Champion">Champion</option> 
         <option value="Role">Role</option> 
         <option value="Lane">Lane</option> 
         <option value="Counter">Counter</option> 
        </select> 
        </br> 
        <input type="submit" name="submit" value="Sorteer!"/> 
        </br> 
        <p>Wat wilt u Weergeven?</p> 
        <select name="toonL"> 
         <option value="Top">Top</option> 
         <option value="Mid">Mid</option> 
         <option value="Jungle">Jungle</option> 
         <option value="Bottom">Bottom</option> 
        </select> 
        <input type="submit" name="toon1" value="Toon"/> 
       </aside> 
    <?php 
     $address = "localhost"; // this is your database's address 
     $username = "root"; // this is your mysql username 
     $password = "1234"; // this is your mysql password 
     $database = "example"; // this is your database 
     $connection = mysqli_connect($address, $username, $password, $database); 

     if (isset($_POST['submit'])){ 
      $query = "SELECT * FROM lolOverzicht ORDER BY {$_POST['sorteren']}, {$_POST['sorteren2']}"; 
      $res = mysqli_query($connection, $query); 
      echo("<table border='1' id='tbloverzicht'><tr><td><b>Champion</td><td><b>Role</td><td><b>Lane</td><td><b>Counter</td></tr>"); 

      while ($row = $res->fetch_assoc()){ 
       echo("<tr>"); 
       echo("<td class='col-champion'>".$row['Champion']."</td> 
         <td>".$row['Role']."</td> 
         <td>".$row['Lane']."</td> 
         <td>".$row['Counter']."</td> 
         <td><a href=\"lolwijzig.php?id={$row['Nummer']}\">Wijzig</a></td> 
         <td><a href=\"lolverwijder.php?id={$row['Nummer']}\">Verwijder</a> 
         </td>"); 
       echo("</tr>"); 
      } 
      echo "</table>"; 
     } 

     if (isset($_POST['toon1'])){ 
      $query = "SELECT * FROM lolOverzicht WHERE Lane = '{$_POST['toonL']}' ORDER BY {$_POST['sorteren']}, {$_POST['sorteren2']}"; 
      $res = mysqli_query($connection, $query); 
      echo "<table border='1' id='tbloverzicht'><tr><td><b>Champion</td><td><b>Role</td><td><b>Lane</td><td><b>Counter</td></tr>"; 

      while ($row=mysql_fetch_array($res)){ 
       echo("<tr>"); 
       echo("<td class='col-champion'>".$row['Champion']."</td> 
         <td>".$row['Role']."</td> 
         <td>".$row['Lane']."</td> 
         <td>".$row['Counter']."</td> 
         <td><a href=\"lolwijzig.php?id={$row['Champion']}\">Wijzig</a></td> 
         <td><a href=\"lolverwijder.php?id={$row['Champion']}\">Verwijder</a></td>"); 
       echo("</tr>"); 
      } 
      echo("</table>"); 
     }   
     mysqli_close($connection); 
    ?> 

    <img src"" id="img"> 

    <script src="script/jquery-1.11.1.min.js" type="text/javascript"></script> 
    <script> 
     $(document).ready(function(){ 
      $('#img').hide(); 
     }); 

     $('.col-champion').mouseover(function(e){ 
      /* 
      Since I don't know where and how you decide which image to show, that's up to you 
      then to change img source just use: 
      $("#img").attr("src","chosenimage.jpg"); 
      */ 
      $('#img').show(); 
      $("#img").offset({left:e.pageX,top:e.pageY}); 
     }); 

     $('.col-champion').mouseout(function(e){ 
      $('#img').hide(); 
     }); 

    </script>  
</body> 

注:我從MySQL改爲mysqli的,因爲MySQL是過時現在,我強烈建議你爲你的下一個項目使用mysqli。

建議:對於將來的問題,我強烈建議你解釋你的問題的每一個細節,提供你認爲會讓你的問題更容易理解的一切。

然後,如果你需要一些像漸變效果,你可以通過點擊here

我希望這有助於你和好運與您的家庭作業給看看JQuery的官方文檔!