光滑的滑块不能动态生成li

Question

找不到解决方案之后：

Wordpress doesn't execute jquery code correctly

我决定改用光滑的滑块，希望它可以工作，但似乎不可能为动态内容创建一个带有wordpress和jquery的合适滑块。

我在做什么：在php中获取所有自定义帖子并将其渲染为数组然后调用在我的谷歌地图中呈现。然后我尝试在所有位置的一侧呈现列表。

更多信息：我没有收到控制台错误。

问题：光滑类适用于qazxsw poi，但不适用于qazxsw poi

如何光滑渲染：

ul

的functions.php：

li

油滑call.js

Answer 1

写了很多

add_shortcode('render-map', 'renderMap');
function renderMap(){
    wp_enqueue_style( 'slick_css', get_template_directory_uri() . '/css/slick.css');
    wp_enqueue_style( 'slick_style', get_template_directory_uri() . '/css/slick-theme.css');
    wp_enqueue_style( 'mapStyle', get_template_directory_uri() . '/css/mapStyle.css');
    wp_register_script( 'googleMap', 'https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap', false, false, false );
    wp_enqueue_script( 'googleMap' );
    wp_enqueue_script( 'slick_js', get_template_directory_uri() . '/js/slick.min.js');
    wp_enqueue_script( 'markerClusterer', get_template_directory_uri() . '/js/markerClusterer.js');
    wp_enqueue_script( 'mapRenderer', get_template_directory_uri() . '/js/mapRenderer.js', array(), false, true );
    echo '<div class="interactiveMap"><div class="rowMap">';
    echo '<div id="map-canvas"></div>';
    echo '<div class="sidebarLocation">
        <div class="recentArticles">
            <div class="recentArticlesHeader">
                <a href="#" class="ca_goUp"><i class="fas fa-chevron-up"></i></a>
            </div>
            <ul id="sidebarLocation" class="recentArticlesGroup sidebarLocationUl">';
    global $post;
    $args = array(
        'post_type' => 'map-location',
        'posts_per_page' => -1,
        'post_status' => 'publish'
    );
    $map_locations = get_posts( $args );
    $myResult = renderLocation($map_locations);
    echo '</ul>
        <div class="recentArticlesFooter">
            <a href="#" class="ca_goDown"><i class="fas fa-chevron-down"></i></a>
        </div>
        </div>
        </div>';
    echo '</div></div>';
    echo "<script type='text/javascript'>";
    echo '$( document ).ready(function() {';
    $js_array = json_encode($myResult);
    echo "var javascript_array = ". $js_array . ";\n";
    echo 'gmaps_results_initialize(javascript_array);});';
    echo "</script>";
    wp_enqueue_script( 'slick_call', get_template_directory_uri() . '/js/slick-call.js', array( 'jquery' ), false, false );
}

后，我注意到即使我打电话给

jQuery(document).ready(function($){
  $('#sidebarLocation').slick({
    arrows: true,
    vertical: true,
    slide: 'li',
    slidesToShow:3,
    slidesToScroll:1,
  });
});

console.log

它在一切都完成加载之前执行。因此，我将它包装在一个函数中，并添加了一个延迟，它工作正常：

slick