carousel - Bootstrap Carousel 将触发更改为晚？

问题描述

我有一个 ASP.Net Core MVC Web 应用程序，在我看来我有一个引导轮播。我正在捕获更改事件，以便获取图像显示的其他信息。我的问题是图像变化不够快。当更改事件触发并且我得到唯一的图像名称时，它仍然在第一张图像上，而不是正在显示的图像上，这意味着我得到的附加信息是错误的。

下面是我的引导轮播：-

 <div id="divCarousel" class="carousel slide" data-interval="false" data-ride="carousel">
            <ul class="carousel-indicators">
                @{
                    int Pos = 0;
                }
                @foreach (var photo in Model.PhotosList)
                {
                    if (Pos == 0)
                    {
                        <li data-target="=#divCarousel" data-slide-to=@photo.Id class="active"></li>
                    }
                    else
                    {
                        <li data-target="=#divCarousel" data-slide-to=@photo.Id></li>
                    }
                    Pos++;
                }
            </ul>
            <!-- The slideshow -->
            <div class="carousel-inner">
                @{
                    Int16 i = 0;
                }
                @foreach (var photo in Model.PhotosList)
                {

                    var photoPath = "~/Photos/" + photo.PhotoPath;

                    if (i == 0)
                    {
                        <div class="carousel-item active">
                            <img class="photoSize" src="@photoPath" alt="No Photo" asp-append-version="true">
                        </div>
                    }
                    else
                    {
                        <div class="carousel-item">
                            <img class="photoSize" src="@photoPath" alt="No Photo" asp-append-version="true">
                        </div>
                    }
                    i++;
                }
            </div>
            <!-- Left and right controls -->
            <a class="carousel-control-prev" href="#divCarousel" data-slide="prev">
                <span class="carousel-control-prev-icon"></span>
            </a>
            <a class="carousel-control-next" href="#divCarousel" data-slide="next">
                <span class="carousel-control-next-icon"></span>
            </a>
        </div>

这是我的javascript来捕获更改事件：-

@section Scripts {
        <script>
            function showPhotoDetails() {
                var url = $('.carousel-item.active img').attr('src');
                var photopath = url.split('?');
                photopath[0] = photopath[0].substring(8, photopath[0].length);

                $.ajax({
                    type: 'POST',
                    url: "/Photos/GetValue?path=" + photopath[0],
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        $("input#txtCreatedBy").val(data.createdBy);
                        $("input#txtDateCreated").val(data.dateCreated);
                        $("textarea#txtNotes").val(data.notes);
                    }
                });
            }
            $(document).ready(function () {
                showPhotoDetails();
                $('.custom-file-input').on("change", function () {
                    var fileLabel = $(this).next('.custom-file-label');
                    var files = $(this)[0].files;
                    if (files.length > 1) {
                        fileLabel.html(files.length + ' files selected.');
                    } else if (files.length == 1) {
                        fileLabel.html(files[0].name);
                    }
                });
                $('.carousel-control-previous').on("click", function () {
                    showPhotoDetails();
                });
                $('.carousel-control-next').on("click", function () {
                    showPhotoDetails();
                });
            });
        </script>
    }

我基本上需要在幻灯片事件之后获取图像名称。非常感谢任何帮助。

谢谢，

标签： carousel

carousel - Bootstrap Carousel 将触发更改为晚？

问题描述

解决方案

推荐阅读