未捕获的类型错误：在多轮播中单击一次或自动滚动后无法读取 null 的属性（读取“classList”）
2022-03-28
8210
因此，我一直在关注官方教程 这里 ，并且我在这里也需要一个滑动指示器，所以我只是从此示例 这里 复制并修改了代码。
我的标记如下所示：
<div class="container my-5">
<!-- Section: Introduction -->
<section class="">
<p>Free example of carousel with multiple items built with the newest Bootstrap 5. Learn how to create a responsive carousel with many items inside.</p>
<p>
Detailed documentation and more examples you can find in our
<a href="https://mdbootstrap.com/docs/standard/components/carousel/" target="_blank"><strong>Carousel Docs</strong></a>.
</p>
<p>See also <a target="_blank" href="https://mdbootstrap.com/docs/standard/plugins/multi-item-carousel/"><strong>Advanced mutli item carousel plugin</strong></a>.</p>
<hr class="mt-5">
<p>Built with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>
<a class="btn btn-primary me-2" href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">Download MDB UI KIT <i class="fas fa-download ms-2"></i></a>
<a class="btn btn-danger me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/" role="button">Learn more</a>
<a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/getting-started/" role="button">Tutorials</a>
<a class="btn btn-dark me-2" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button">GitHub <i class="fab fa-github ms-2"></i></a>
<hr class="mb-5"/>
</section>
<!-- Section: Introduction -->
<!-- Section: Basic example -->
<section class="">
<p><strong>Basic example</strong></p>
<div class="container my-5">
<!-- Carousel wrapper -->
<div
id="carouselBasicExample"
class="carousel slide carousel-dark text-center carousel-multi-item"
data-ride="carousel"
data-mdb-ride="carousel"
>
<!-- Inner -->
<div class="carousel-inner py-4">
<ol class="carousel-indicators">
<li data-target="#carouselBasicExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselBasicExample" data-slide-to="1"></li>
<li data-target="#carouselBasicExample" data-slide-to="2"></li>
<li data-target="#carouselBasicExample" data-slide-to="3"></li>
<li data-target="#carouselBasicExample" data-slide-to="4"></li>
<li data-target="#carouselBasicExample" data-slide-to="5"></li>
</ol>
<!-- Single item -->
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/181.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/182.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/183.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/184.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.daoisjoifjoidsafpijsadpoj
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/185.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/186.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/187.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/188.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/189.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Inner -->
</div>
<!-- Carousel wrapper -->
</div>
<!-- Controls -->
<div class="d-flex mb-4">
<button
class="carousel-control-prev justify-content-start"
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true">b</span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next justify-content-end"
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true">a</span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<!-- Section: Basic example -->
</div>
但是，在一次单击/一次自动滚动后，它失败并出现错误
Uncaught TypeError: Cannot read properties of null (reading 'classList')
。当您单击更多次时，它不会抛出任何错误或工作，很奇怪……
- 此外，我是否需要两个不同的版本 - 一个用于移动设备，一个用于桌面，用于指标，因为由于移动视图仅显示单个幻灯片，因此数量会有所不同？
官方文档（API）在这里，但它对我没有帮助： https://mdbootstrap.com/docs/standard/components/carousel/#docsTabsAPI
3个回答
不确定您是否找到了解决方案，但我想我找到了。将 data-target 和 data-slide-to 更改为 data-bs-target 和 data-bs-slide-to 修复了这个空引用错误。如果 Bootstrap 在其中添加一个空错误检查并附带一条有用的消息就好了。
<div class="carousel-indicators">
<button data-bs-target="#homeCarouselControls" data-bs-slide-to="0" class="active"></button>
<button data-bs-target="#homeCarouselControls" data-bs-slide-to="1"></button>
</div>
Mike Davis
2022-11-07
我将脚本包含在 HTML 内容中，并且按照示例完美运行。我认为您的 HTML DOM 树中缺少某些内容，导致您的代码在此处停止
Uncaught TypeError：无法读取 null 的属性（读取“classList”）
它可能是一个关闭的 div，因此这就是您的
carousel.js
中断并且无法继续下一张幻灯片的原因。通过调试，我确实找到了它，但为了访问
classList
的属性，您必须将其放置为
classList[0]
，通常不应该具有这种结构。它必须只是简单的
classList.remove(YOUR_CLASS)
您应该在此文件夹中设置一个断点，以获取您真正需要的信息。
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.js"></script>
<div class="container my-5">
<!-- Section: Introduction -->
<section class="">
<p>Free example of carousel with multiple items built with the newest Bootstrap 5. Learn how to create a responsive carousel with many items inside.</p>
<p>
Detailed documentation and more examples you can find in our
<a href="https://mdbootstrap.com/docs/standard/components/carousel/" target="_blank"><strong>Carousel Docs</strong></a>.
</p>
<p>See also <a target="_blank" href="https://mdbootstrap.com/docs/standard/plugins/multi-item-carousel/"><strong>Advanced mutli item carousel plugin</strong></a>.</p>
<hr class="mt-5">
<p>Built with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>
<a class="btn btn-primary me-2" href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">Download MDB UI KIT <i class="fas fa-download ms-2"></i></a>
<a class="btn btn-danger me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/" role="button">Learn more</a>
<a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/getting-started/" role="button">Tutorials</a>
<a class="btn btn-dark me-2" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button">GitHub <i class="fab fa-github ms-2"></i></a>
<hr class="mb-5"/>
</section>
<!-- Section: Introduction -->
<!-- Section: Basic example -->
<section class="">
<p><strong>Basic example</strong></p>
<div class="container my-5">
<!-- Carousel wrapper -->
<div
id="carouselBasicExample"
class="carousel slide carousel-dark text-center"
data-mdb-ride="carousel"
>
<!-- Controls -->
<div class="d-flex justify-content-center mb-4">
<button
class="carousel-control-prev position-relative"
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next position-relative"
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Inner -->
<div class="carousel-inner py-4">
<!-- Single item -->
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/181.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/182.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/183.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/184.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/185.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/186.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/187.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/188.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/189.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Carousel wrapper -->
</div>
<!-- Controls -->
<div class="d-flex mb-4">
<button
class="carousel-control-prev justify-content-start"
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true">b</span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next justify-content-end"
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true">a</span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<!-- Section: Basic example -->
</div>
Oris Sin
2022-03-29
对于我来说，在 bootstrap 5 中，问题在于我在轮播中放了 4 张图片，而指示按钮只有 3 个。因此，它抛出了错误“无法读取 null 的属性，正在读取 classList”。
也许这对某些人有帮助。
Mazhar Ali
2023-05-08