2014-03-19 92 views
0

我有這個網站的對象名稱列表。對象可以是椅子,桌子,門等。對象本身位於頁面上的另一個div中,當從列表中單擊某個按鈕時,我需要將其旋轉。從數組中獲取特定變量

列表上的每個對象都有一個連接到它的按鈕,該按鈕將旋轉該特定對象。

但是,我的問題是,無論您點擊哪個按鈕,它都會旋轉列表中的最後一項,在我的例子中是門。因此,單擊椅子上的旋轉將導致旋轉門並始終旋轉門。

我有相當多的代碼,但我基本上需要一些按鈕來識別按鈕被點擊。所以如果我點擊附在椅子上的按鈕,它必須找到該椅子的src,然後改變它。

我在代碼中添加了很多註釋,它解釋了與我剛纔相同的地方,我希望這樣可以更容易理解代碼和我的問題。

TL; DR:

page.php文件:

//This query selects the rotation and src for the specific object 
      $stmt->prepare('SELECT z, rotation, src, name FROM house_room1 INNER JOIN objects ON house_room1.object_id=objects.object_id WHERE house_room1.ref_id = ?'); 
      $stmt->bind_param('i', $i); 

     if ($stmt->execute()) { 
      $stmt->bind_result($z, $rotation, $src, $name); 
      while($stmt->fetch()) { 
        $results = 1; 
       $itemArray['number'] = $item_number; //Number of the object/item, (1,2,3) 
       $itemArray['name'] = $name; //Name of the object (Oak chair) 
       $itemArray['ref_id'] = $z; //Position of the element on the z axis (z-index) 
       $itemArray['rotation'] = $rotation; //Rotation of the object, can be (0,1,2,3) 
       $itemArray['src'] = $src; //Src of the object image (image.png) 

    array_push($finalArray, $itemArray); 

      } 
     } 

ajax.php

var img_src = "<?php echo $arr['src']; ?>"; 

這ajax.php代碼總是輸出數組中的最後src。我需要它顯示與附加到它的按鈕對應的對象的特定src

我有太多的時間,所以我想讀所有的代碼:

page.php文件:

// Number of the objects 
    $item_number = 0; 
//Number of rows, this is just set to 12 atm 
    $rowsize = 12; 

    $itemArray = array(); 
    $finalArray = array(); 
    $results = 0; 

//White the $rowsize is less than $i, get a new object from the query 
    for ($i = 0; $i < $rowsize; $i++) { 

     $stmt = $mysqli->stmt_init(); 
//This query selects the rotation and src for the specific object 
     $stmt->prepare('SELECT z, rotation, src, name FROM house_room1 INNER JOIN objects ON house_room1.object_id=objects.object_id WHERE house_room1.ref_id = ?'); 
     $stmt->bind_param('i', $i); 

    if ($stmt->execute()) { 
     $stmt->bind_result($z, $rotation, $src, $name); 
     while($stmt->fetch()) { 
       $results = 1; 
      $itemArray['number'] = $item_number; //Number of the object/item, (1,2,3) 
      $itemArray['name'] = $name; //Name of the object (Oak chair) 
      $itemArray['ref_id'] = $z; //Position of the element on the z axis (z-index) 
      $itemArray['rotation'] = $rotation; //Rotation of the object, can be (0,1,2,3) 
      $itemArray['src'] = $src; //Src of the object image (image.png) 

array_push($finalArray, $itemArray); 

     } 
    } 
    else { 
     echo 'Something went terribly wrong' . $mysqli->error; 
    } 
    $stmt->close(); 

    $item_number++; //Next object/item! 
} 

if($results == 1){ 

    aasort($finalArray,"ref_id"); 

//Inserting all 12 objects from the query in a list which has a button corresponding to each object 
    foreach($finalArray as $arr){ 
     echo '<li id="item-' . $arr['number'] . '" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' . $arr['name'] . ' 
     <img class="rotate" id="img_'.$arr['number'].'" src="images/house/other/settings.jpg" onclick="rotateObject(this)">'; 
    } 
} 

//create a function for sorting 
    function aasort (&$array, $key) { 
     $sorter=array(); 
     $ret=array(); 
     reset($array); 
     foreach ($array as $ii => $va) { 
      $sorter[$ii]=$va[$key]; 
     } 
     asort($sorter); 
     foreach ($sorter as $ii => $va) { 
      $ret[$ii]=$array[$ii]; 
     } 
     $array=$ret; 
    } 

ajax.php:

<script type="text/JavaScript"> 

function rotateObject(e) 
{ 
    //e is handler which contains info about the item clicked. From that we can obtain the image id. 
    //since the id are of the form img_123(some number), we need to extract only the number. 
    var img_id = e.id.split("_")[1]; 
    //var img_src = "<?php echo $arr['number'][0]['src'];?>"; //Tried this 

    //This variable (img_src) is currently the same no matter what. 
    //It's equal to the last src element in the array. 
    //This img_src has to know what button was clicked on and change the src that corresponds 
    //to that specific object. Probably by regonizing it's item_number? But I don't know how... Hmm 
    var img_src = "<?php echo $arr['src']; ?>"; 
    var img_rotate = <?php echo (($arr['rotation'] + 1) % 4); ?>; 


    var xmlhttp; 
    if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    {// code for IE6, IE5 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange=function(){ 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      //Changing the current src from whatever it is, to the src that corresponds to the button clicked on. 
      var getEle = document.getElementsByClassName('item' + img_id)[0]; 
      var imagePath = img_src + ".png"; 
      getEle.src = imagePath + xmlhttp.responseText; 
     } 
    } 
    //Don't think about this; It does something else that works fine 
    xmlhttp.open("POST","database/update_settings_rotate.php",true); 
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
    xmlhttp.send("item_id="+encodeURIComponent(img_id)); 
} 
</script> 

非常感謝您的看着我的代碼,我一直在尋找2周的解決方案,現在看起來不可能。但是,如果我可以在數組中的特定位置調用src,它似乎很簡單。任何幫助和建議都會很感激。

+2

更少的代碼更多的答案 –

+0

請張貼您的HTML。 –

+0

檢查附加到該按鈕的ID。可能你用最後一個元素覆蓋了全部ID。你的代碼太笨重了......沒有時間閱讀它! –

回答

1

page.php文件,改變下面的代碼

echo '<li id="item-' . $arr['number'] . '" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' . $arr['name'] . ' 
     <img class="rotate" id="img_'.$arr['number'].'" src="images/house/other/settings.jpg" onclick="rotateObject(this)">'; 

作爲

echo '<li id="item-' . $arr['number'] . '" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' . $arr['name'] . ' 
     <img class="rotate" id="img_'.$arr['number'].'" src="images/house/other/settings.jpg" onclick="rotateObject(this,\'' . $arr['src'] . '\')">'; 

ajax.php,改變功能名稱rotateObject(e)rotateObject(e, src)並傳遞給SRC

var img_src = src;

我認爲這會將您點擊的按鈕的正確src提供給您。

+0

是的。那正是我需要的。非常感謝,幾周來一直在尋找這樣的答案! – owwyess