根据在其中一个div中动态显示的一个类重新排序div

Question

我在我的Flex容器中订购我的div时遇到了一些麻烦。 对我来说具有挑战性的是根据哪个类“扩展”来修改我的7个食谱的顺序。

当我点击食谱时，它从有限的大小（250px）变为100%宽。我想避免使用2个食谱，1行折叠食谱和1个扩展食谱，例如：

这是我的HTML（.recipes是flex容器），扩展了第7个配方：

<section class="recipes">
  <div class="recipe collapsed" id="recipe1">
  <div class="recipe collapsed" id="recipe2">
  <div class="recipe collapsed" id="recipe3">
  <div class="recipe collapsed" id="recipe4">
  <div class="recipe collapsed" id="recipe5">
  <div class="recipe collapsed" id="recipe6">
  <div class="recipe expanded" id="recipe7">
</section>

我用订单尝试了各种选择，这不是我的预期。 下面将我的扩展配方带到页面顶部（不知道为什么BTW），这不是很糟糕但不完美：

#recipe1.collapsed { order: 1; }
#recipe2.collapsed { order: 2; }
#recipe3.collapsed { order: 3; }
#recipe4.collapsed { order: 4; }
#recipe5.collapsed { order: 5; }
#recipe6.collapsed { order: 6; }
#recipe7.collapsed { order: 7; }

由于我的HTML是动态更新的（一次只有一个扩展的配方：如果扩展了第二个，第一个用JS折叠），我如何设法订购6个折叠的配方+以下扩展的配方方式是什么？

如果展开#recipe4，我需要以下顺序：

#recipe1.collapsed { order: 1; }
#recipe2.collapsed { order: 2; }
#recipe3.collapsed { order: 4; }
#recipe4.expanded { order: 3; }
#recipe5.collapsed { order: 5; }
#recipe6.collapsed { order: 6; }
#recipe7.collapsed { order: 7; }

如果扩展了另一个配方，我想设置另一个订单？

Answer 1

如果您有3个元素的行，那么您需要按照3个组的顺序设置订单，在每个组之间存在间隙以逐行重新排序：

示例tabindex所以div可以捕获:focus

＆＃13;

＆＃13;

.recipes {
  display:flex;
  flex-wrap:wrap;
}
.recipe {
  width:30vw;
  height:50px;
  margin:0.5vw;
  border:solid;
  box-sizing:border-box;
}
.recipe:focus {
  width:92vw;
  color:red
}
div:focus:nth-child(2),div:focus:nth-child(3) {
  order:1!important/* important used to overwrite selector with #recipeX mind it while using this for yourself. get rid of !important by increasing selector specifity  */
}
div:focus:nth-child(5),div:focus:nth-child(6) {
  order:6!important/* important used to overwrite selector with #recipeX mind it while using this for yourself. get rid of !important by increasing selector specifity  */
}
/*these divs can have order assigned via nth-child() instead ID (could be created via loop within a script)*/
#recipe1  { order: 3; }
#recipe2  { order: 4; }
#recipe3  { order: 5; }
#recipe4  { order: 9; }
#recipe5  { order: 10; }
#recipe6  { order: 11; }
#recipe7  { order: 15; }

/* demo purpose*/
section {counter-reset:divs}
section div {counter-increment:divs;display:flex;align-items:center;justify-content:center;}
section div:before {content:counter(divs)}

＆＃13;

<section class="recipes">
  <div class="recipe collapsed" id="recipe1" tabindex="0"></div>
  <div class="recipe collapsed" id="recipe2" tabindex="0"></div>
  <div class="recipe collapsed" id="recipe3" tabindex="0"></div>
  <div class="recipe collapsed" id="recipe4" tabindex="0"></div>
  <div class="recipe collapsed" id="recipe5" tabindex="0"></div>
  <div class="recipe collapsed" id="recipe6" tabindex="0"></div>
  <div class="recipe expanded" id="recipe7" tabindex="0"></div>
</section>

＆＃13;

＆＃13;

＆＃13;

https://codepen.io/gc-nomade/pen/eEgZyB

Answer 2

您可以使用简单的JavaScript代码执行此操作：

var items = document.querySelectorAll(".recipe"); // get all recipes
items.forEach(function(item) {
    item.onclick = function() { // add onClick event
        var item_index = Array.prototype.indexOf.call(items, item); // find the index of the item which is clicked

        // Add 1 to (index+1) until it reaches the clicked item
        var plus = 1;
        items.forEach(function(item,index) {
            if (index == item_index)
                plus = 0;
            item.style.order = index+1+plus;
        });

        // set the order of clicked item to 1
        this.style.order = 1;
    }
});