我的网站上有一个对象名称列表。对象可以是椅子，桌子，门等。对象本身位于页面上的另一个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调用到数组中的特定位置，这似乎很简单。任何帮助和建议都很受欢迎。
答案 0 :(得分：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。