重新排列從PHP陣列呈現的HTML

我確定這有一個快速而簡單的答案，它現在只是沒有提供給我。我已經建立定製HTML/CSS/JS用於從一個這樣的數組拉動其內容的滑塊：重新排列從PHP陣列呈現的HTML

$slides = [ 
    [ 
     'img'  => 'image1.jpg', 
     'text' => 'Slide One text', 
     'svg'  => 'cat1' 
    ], 
    [ 
     'img'  => 'image2.jpg', 
     'text' => 'Slide Two Text', 
     'svg'  => 'cat2' 
    ], 
    // First slide 
    [ 
     'img'  => 'image3.jpg', 
     'text' => 'Slide Three Text', 
     'svg'  => 'cat3' 
    ], 
    [ 
     'img'  => 'image4.jpg', 
     'text' => 'Slide Four Text', 
     'svg'  => 'cat4' 
    ], 
    [ 
     'img'  => 'image5.jpg', 
     'text' => 'Slide Five Text', 
     'svg'  => 'cat5' 
    ], 
];

我建立滑塊的方式的CSS/JS依賴於第三滑動活躍。幻燈片包裝然後重置爲移動和數組中的第一張幻燈片是呈現的HTML中的第一張幻燈片。我不想更改/更新css結構，因爲它控制着大約5個媒體查詢斷點，而且對於獨特的設計非常具體。我希望有一個簡單的方法，我可以重新排列html中的數組，所以在桌面上第三張幻燈片是第一張，在移動設備上，第一張幻燈片是第一張。有沒有簡單的方法來做到這一點，我只是沒有想到？我的HTML看起來像這樣：

 <div class="home-slider-wrap"> 
       <?php foreach ($slides as $index=>$slide): ?> 
        <div class="home-slider-slide slide<?php echo $index; ?> <?php if($index == 2){ echo 'active'; } ?>" data-slide="<?php echo $index; ?>"> 
         <img src="/images/homepage/<?php echo $slide[img]; ?>" alt="<?php echo $slide['text']; ?>"> 
        </div> 
       <?php endforeach; ?> 
      </div>

我想保持<?php if($index == 2){ echo 'active'; } ?>，這樣我就不必更新JS或CSS，但要重新排序的陣列。希望這是有道理的。

來源

2017-02-01 JordanBarber

所以你面對什麼問題？ –

如果您正在重新加載頁面，請在將頁面重新發送到客戶端之前讓PHP重新排序元素。如果必須在客戶端完成，則必須添加JS來對數組進行排序（sort），然後重新渲染所有已更改的內容。這可能也可以在媒體查詢中使用額外的CSS來完成。 – Shilly

使用jQuery你可以做類似

$(function(){ 
    if($(window).width() > deskTopBreakpointValue){   
     var $first = $('.home-slider-slide.active'); 
     $('.home-slide-wrap').prepend($first); 
    } 

    // now initialize your slider code 

})

來源

2017-02-01 16:20:47 charlietfl

您可能想在刪除它之前，以避免重複 – MrBizle

@MrBizle不能發生......當你移動一個元素，它必須從它的當前位置刪除，以便被放入一個新的，是全部由'prepend（）'處理 – charlietfl

重新排列從PHP陣列呈現的HTML

回答

相關問題