Question

我有这个网站使用JQuerys可排序功能，这使我可以在列表上拖动项目。列表中的每个项目都有一个与该项目对应的按钮，并连接到站点上的图像。当用户将项目拖到另一个地方而不是它的位置时，我需要更改图像z-index。现在我只是更改alt attribut以使自己更容易，但我的代码看起来像这样：

var data = $(this).sortable("serialize");
var change_zindex = 1;
var drag_id_tmp = $(ui.item).attr("id");
var drag_id = drag_id_tmp.split("-")[1];

document.getElementsByClassName('item' + drag_id)[0].setAttribute("alt", change_zindex);

代码知道拖动了哪个项目，问题是alt属性现在只是设置为1，并且它应该设置为对应于该位置的值用户将项目拖动到。有谁知道这有可能吗？提前致谢。如果您希望我为您提供更多代码，请告诉我。

编辑：

在我的数据库中工作，如下所示：

/* Insert the parameter values */
        $i = 0;

        foreach ($_POST['item'] as $value) {

            /* Register a prepared statement */
            if ($stmt = $mysqli->prepare('UPDATE house_room1 SET z = ? WHERE ref_id = ?')) {

                /* Bind parametres */
                $stmt->bind_param('ii', $i, $value);

                /* Execute the query */
                $stmt->execute();

                /* Close statement */
                $stmt->close();

            } else {
                /* Something went wrong */
                echo 'Something went terribly wrong' . $mysqli->error;
            }
            $i++;
        }

它在使用序列化的数组中我相信，也将序列化添加到AJAX代码

现状：

AJAX：

$(document).ready(function () {
            $("#sortable").sortable({
        axis: "y",
        stop: function (event, ui) {

            var data = $(this).sortable("serialize");

             var change_zindex = 1;
             var drag_id_tmp = $(ui.item).attr("id");
             var drag_id = drag_id_tmp.split("-")[1];
             document.getElementsByClassName('item' + drag_id)[0].setAttribute("alt", item);

             $('ul li').each(function(index, item){
                 $(item).children('span').attr('alt', drag_id + 1)
             });

            $.ajax({
                data: data,
                type: "POST",
                url: "database/update_settings_sort.php"
            });
        }
    });
    $( "#sortable" ).disableSelection();
});

我正在使用的HTML：对于具有z-index的图像：

echo '<img src="' . $src . $rotation .'.png" class="item' . $item_number . '" 
rel="'.$rotation.'" alt="'.$z.'"style="position:absolute; left:' . $x . 'px; top:' . $y . 
'px; z-index:'. $z . ';">'; if ($x != 0) { echo'</a>'; }

实际列表的HTML：

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']. '\')">';

Answer 1

即使物品被丢弃，您也可以挂钩，然后重新编号所有＆＃34; alt＆＃34;标记到你想要的任何价值。在下面的示例中，我将列表项列为1-7。删除项目后，它会遍历列表项并重新编号。

$( "#sortable" ).sortable({

     // Hook into stop event of sortable
     stop: function( event, ui ) {

         // Iterate over all of the list items
         $('ul li').each(function(index, item){

              // Set each items "alt" attribute to it's corresponding spot in the list.
              // Added +1 so that it uses numbers 1-7 instead of 0-6
              $(item).children('span').attr('alt', index + 1)   
         });
     }
});

Here's a fiddle for it.

JQuery可重复遍历元素

1 个答案: