Question

我正在编写一种有序的照片管理面板，我在其中使用了flexbox和order属性。 order属性从数据库加载，所有元素都正确显示。我也做了一个改变那个顺序的功能。这包括两个向右或向左移动元素的箭头，修改它的顺序属性，并使用ajax在数据库中修改它。

我的问题是，在使用jQuery修改order属性后，选择器无法再访问该元素，所以当我向右移动元素时，我向左移动它就不起作用。

使用开发者控制台我试图通过指令执行脚本指令，问题是当我选择一个元素：

var element = $('.thumb[style="order: 3"]');

它返回正确的元素，但如果之后我使用：

修改它

element.css('order',4);

当我再次使用选择器时，它不会返回任何内容。

$('.thumb[style="order: 4"]');

返回

[]

但是在Chrome和Firefox的元素检查器中，我看到该元素已经改变了它的顺序。

我已经做了一个小提示来展示这个问题。我试过搜索但没找到任何东西。任何帮助表示赞赏。

Answer 1

这是因为当您使用.css添加属性时，它会在值后添加分号：

<div class="thumb" style="order: 1;">2</div>

所以你的选择器现在是错误的（因为它不包含分号）

我会将此添加到您的初始load and selector (updated fiddle)或更改为使用数据属性而是对其进行过滤