Question

没有为此找到解决方案：

Wordpress doesn't execute jquery code correctly

我决定改用光滑的滑块，希望它能够正常工作，但似乎无法用动态内容的wordpress和jquery创建一个合适的滑块。

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

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

问题：光滑类适用于ul，但不适用于li

如何渲染：

的functions.php：

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 );
}

光滑-call.js

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

Answer 1

写了很多console.log后，我注意到即使我在

上呼叫slick

jQuery(document).ready

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

jQuery(document).ready(function($){
  function start_slick(){
    $('#sidebarLocation').slick({
      arrows: true,
      vertical: true,
      slide: 'li',
      slidesToShow:3,
      slidesToScroll:1,
      prevArrow: $('.ca_goUp'),
      nextArrow: $('.ca_goDown'),
      infinite:false,
    });
  }
  window.setTimeout( start_slick, 2000 );
});

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

1 个答案: