2015-11-21 22 views
-1

我只需要知道一些東西。我有這樣的代碼jQuery中:jQuery和PHP需要

$(function() { 
    $("#draggable").draggable(); 
    var place = 0; 
    var body = 0; 
    $('#cables').hide(); 
    $(".droppable").droppable({ 
     drop: function(event, ui) { 
      $(this).addClass("ui-state-highlight"); 
      if(place === 0) { 
       if(this.id == "mo") { 
        place ++; 
        body ++; 
        $('#draggable').css({ 
         'background-color':'#00FF00', 
        }); 
        $('#draggable').text('Grafická karta'); 
       } 
       else { 
        place++; 
        $('#draggable').css({ 
         'background-color':'#FF0000 ', 
        }); 
        $('#draggable').text('Grafická karta'); 
       } 
      } 
      else if (place === 1) { 
       if(this.id == "gp") { 
        place ++; 
        body ++; 
        $('#draggable').css({ 
         'background-color':'#00FF00', 
        }); 
        $('#draggable').text('Processor'); 
       } 
       else{ 
        place++; 
        $('#draggable').css({ 
         'background-color':'#FF0000 ', 
        }); 
        $('#draggable').text('Processor'); 
       } 
      } 
      else if (place === 2) { 
       if(this.id == "cp") { 
        place ++; 
        body ++; 
        $('#draggable').css({ 
         'background-color':'#00FF00', 
        }); 
        $('#draggable').text('RAM'); 
       } 
       else { 
        place++; 
        $('#draggable').css({ 
         'background-color':'#FF0000 ', 
        }); 
        $('#draggable').text('RAM'); 
       } 
      } 
      else if (place === 3) { 
       if(this.id == "ra") { 
        place ++; 
        body ++; 
        $('#draggable').css({ 
         'background-color':'#00FF00', 
        }); 
        $('#draggable').text('HDMI'); 
        $('#cables').fadeIn(); 
       } 
       else { 
        place++; 
        $('#draggable').css({ 
         'background-color':'#FF0000 ', 
        }); 
        $('#draggable').text('HDMI'); 
        $('#cables').fadeIn(); 
       } 
      } 
      else if (place === 4) { 
       if(this.id == "hdmi") { 
        place ++; 
        body ++; 
        $('#draggable').css({ 
         'background-color':'#00FF00', 
        }); 
        $('#draggable').text('X'); 
       } 
       else { 
        place++; 
        $('#draggable').css({ 
         'background-color':'#FF0000 ', 
        }); 
        $('#draggable').text('X'); 
       } 
      } 
     }, 
     over: function(event, ui) { 
     } 
    }); 
}); 

這是HTML5標記:

<!doctype html> 
<html lang="cs" dir="ltr"> 
    <head> 
     <title>Hardware</title> 
     <link rel='stylesheet' type='text/css' href='graph/design.css'> 
     <link rel='shortcut icon' type='image/x-icon' href='favicon.ico'> 
    </head> 
    <body> 
     <span class="display"></span> 
     <section id='game'> 
      <article id='draggable'> 
       Základní deska 
      </article> 
      <article id='images'> 
      <?php require('cont/kabely.php') ?> 
       <table> 
        <tr> 
         <td><img src='graph/motherboard.png' id='mo' class="droppable ui-widget-header"></td> 
         <td><img src='graph/cpu.png' id='cp' class="droppable ui-widget-header"></td> 
         <td><img src='graph/gpu.png' id='gp' class="droppable ui-widget-header"></td> 
         <td><img src='graph/ram.png' id='ra' class="droppable ui-widget-header"></td> 
        </tr> 
       </table> 
      </article> 
     </section> 
     <script type='text/javascript' src='scripts/jquery.js'></script> 
     <script type='text/javascript' src='scripts/ui.js'></script> 
     <script type='text/javascript' src='scripts/cookie.js'></script> 
     <script type='text/javascript' src='scripts/external.js'></script> 
    </body> 
</html> 

和外部是

<table id='cables'> 
    <tr> 
     <td><img src='graph/hdmi.png' id='hdmi'></td> 
     <td><img src='graph/lan.png' id='la'></td> 
     <td><img src='graph/napajeci.png' id='na'></td> 
     <td><img src='graph/rca-composite.png' id='rc'></td><tr> 
     <td><img src='graph/vga.png' id='vg'></td> 
     <td><img src='graph/usb2.png' id='u2'></td> 
     <td><img src='graph/jack.png' id='ja'></td> 
     <td><img src='graph/usb3.png' id='u3'></td><tr> 
    </tr> 
</table> 

那麼問題出在哪裏:

我試圖製作應用程序,人們將抓住標誌並將其放在圖像上(jQuery ui Draggable)。它的工作原理,直到我到了這部分代碼:

else if (place === 4) { 
       if(this.id == "hdmi") { 
        place ++; 
        body ++; 
        $('#draggable').css({ 
         'background-color':'#00FF00', 
        }); 
        $('#draggable').text('X'); 
       } 
       else { 
        place++; 
        $('#draggable').css({ 
         'background-color':'#FF0000 ', 
        }); 
        $('#draggable').text('X'); 
       } 
      } 

對於這個工作我在HTML需要在文件和IDS are.So他們將做第一個「級別」,並轉到另一這樣一些照片隱藏外部文件有些會顯示。他們表現出色,但他們沒有反應jQuery代碼。誰能幫我 ?他們正在反應像jQuery中,如果地方== 1 ... 所需的圖片開始在地方== 4.我希望這是可以理解的。

感謝所有會做出反應的人。

+0

你需要向下縮小的問題,只提供真正相關的代碼/只有那些必要的 – LihO

回答

0
<tr> 
        <td><img src='graph/motherboard.png' id='mo' class="droppable ui-widget-header"></td> 
        <td><img src='graph/cpu.png' id='cp' class="droppable ui-widget-header"></td> 
        <td><img src='graph/gpu.png' id='gp' class="droppable ui-widget-header"></td> 
        <td><img src='graph/ram.png' id='ra' class="droppable ui-widget-header"></td> 
       </tr> 

你只有4項,而不是5,所以place == 4將無法​​正常工作