【问题标题】:Why is my bootstrap Javascript not working (wordpress)为什么我的引导 Javascript 不起作用(wordpress)
【发布时间】:2021-10-21 21:57:08
【问题描述】:

这是我的函数 php

function maxprofessional_scripts() {
    wp_enqueue_style( 'maxprofessional-style', get_stylesheet_uri(), array(), _S_VERSION );
    wp_enqueue_style( 'maxprofessional-main', get_template_directory_uri() . '/css/main.css' );
    wp_enqueue_style( 'bootstrap-icons', 'https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css' );


    wp_style_add_data( 'maxprofessional-style', 'rtl', 'replace' );
    wp_register_script('app-js', get_template_directory_uri() . '/app.js', false, '1.0', true);
    // wp_enqueue_script( 'app-js' );
    wp_enqueue_script( 'my_custom_script', get_template_directory_uri() . '/app.js' );
    wp_enqueue_script( 'bootstrap-popper', 'https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js' );
    wp_enqueue_script( 'bootstrap-jdelivery', 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js' );

    

    wp_enqueue_script( 'maxprofessional-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );

    if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
        wp_enqueue_script( 'comment-reply' );
    }
}
add_action( 'wp_enqueue_scripts', 'maxprofessional_scripts' );

我怎么知道它不工作是因为下面的代码的轮播(轮播不工作)

<div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="carousel slide multi-item-carousel" id="theCarousel">
          <div class="carousel-inner">
            <div class="item active">
              <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a></div>
            </div>
            <div class="item">
              <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></a></div>
            </div>
            <div class="item">
              <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></a></div>
            </div>
            <div class="item">
              <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a></div>
            </div>
            <div class="item">
              <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a></div>
            </div>
            <div class="item">
              <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
            </div>
            <!-- add  more items here -->
            <!-- Example item start:  -->
            
            <div class="item">
              <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
            </div>
            
            <!--  Example item end -->
          </div>
          <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
          <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
        </div>
      </div>
    </div>
  </div>

这里是 JS

$('.multi-item-carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
  
  if (next.next().length>0) {
    next.next().children(':first-child').clone().appendTo($(this));
  } else {
    $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});

在我的 functions.php 中导入 bootstrap js 时我做错了什么吗?我将不胜感激。谢谢你 。我需要在入队之前注册吗?我很迷茫为什么它不起作用

【问题讨论】:

  • 我建议将文件保存在本地而不是从外部加载
  • 你定义 $ 为 jQuery 吗?
  • @HowardE 不,我只是把它放在 app.js 文件中
  • 开发者工具没有报错吗?

标签: javascript php wordpress


【解决方案1】:

Bootstrap 5 及以上版本使用 data-bs-slide-to 和 carousel-item 类,您问题中的代码是 bootstrap 4 及更低版本的旧代码。

这是latest version carousel的链接

还有你的工作代码:

$('.multi-item-carousel .carousel-item').each(function(){
      var next = $(this).next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo($(this));
      
      if (next.next().length>0) {
        next.next().children(':first-child').clone().appendTo($(this));
      } else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
      }
    });
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div class="carousel slide multi-item-carousel" id="theCarousel" data-bs-ride="carousel">
              <div class="carousel-inner">
                <div class="carousel-item active">
                  <div class="col-xs-4"><a href="#1"><img src="https://cdn.pixabay.com/photo/2016/10/07/13/57/puzzle-1721619__340.jpg" class="img-responsive"></a></div>
                </div>
                <div class="carousel-item">
                  <div class="col-xs-4"><a href="#1"><img src="https://cdn.pixabay.com/photo/2016/10/07/13/57/puzzle-1721619__340.jpg" class="img-responsive"></a></div>
                </div>
                <div class="carousel-item">
                  <div class="col-xs-4"><a href="#1"><img src="https://cdn.pixabay.com/photo/2016/10/07/13/57/puzzle-1721619__340.jpg" class="img-responsive"></a></div>
                </div>
                <div class="carousel-item">
                  <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a></div>
                </div>
                <div class="carousel-item">
                  <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a></div>
                </div>
                <div class="carousel-item">
                  <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
                </div>
                <!-- add  more items here -->
                <!-- Example item start:  -->
                
                <div class="carousel-item">
                  <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a></div>
                </div>
                
                <!--  Example item end -->
              </div>
              <a class="left carousel-control" href="#theCarousel" data-bs-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
              <a class="right carousel-control" href="#theCarousel" data-bs-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>
          </div>
        </div>
      </div>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-09-20
    • 1970-01-01
    • 1970-01-01
    • 2012-01-07
    • 2018-01-05
    • 1970-01-01
    • 2020-12-11
    相关资源
    最近更新 更多