javascript - jQuery - 将数据从 jQuery 函数传递到特定的 div？

Question

我试图将数据从一个函数传递到一个特定的 div，但我似乎无法让它工作。我正在制作一个画廊查看器，我只想传递我用来显示页面中每个画廊的图片和文件总数的计数器。

代码如下:

jQuery

$(document).ready(function () {
    $('.photoset').each(function () {
        $(this).data('counter', 0);
        $items = $(this).find('img')
        $(this).data('numItems', $items.length);
    });



    var showCurrent = function (photoset) {
        $items = photoset.find('img');
        var counter = photoset.data('counter');
        var numItems = $items.length;
        var itemToShow = Math.abs(counter % numItems);

        $items.fadeOut();
        $items.eq(itemToShow).fadeIn();
    };

    $('.photoset').on('click', function (e) {
        e.stopPropagation();
        var photoset = $(this);
        var pWidth = photoset.innerWidth();
        var pOffset = photoset.offset();
        var x = e.pageX - pOffset.left;
        if (pWidth / 2 > x) {
            photoset.data('counter', photoset.data('counter') - 1);
            if (photoset.data('counter') < 0)
                photoset.data('counter', photoset.data('numItems') - 1);
            showCurrent(photoset);
        } else {
            photoset.data('counter', photoset.data('counter') + 1);
            if (photoset.data('counter') > photoset.data('numItems') - 1)
                photoset.data('counter', 0);
            showCurrent(photoset);
        }
        $(this).text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'))
    });
});

HTML Razor

<div class="container">
    @{ var i = 10; }
    @foreach (var item in Model)
    {
        <div class="row">
            <div class="col-md-4 col-md-offset-4 text-center">
                <br />
                @Html.DisplayFor(modelitem => item.NomeGaleria)
                <br />
            </div>
        </div>
        <div class="row"><div class="col-md-4 col-md-offset-4 text-center"><div class="nav-informer"></div></div></div>
        <div class="row">
                <div class="photoset center-block">


                    @{ var item2 = item.FilePaths;}
                    @for (var k = 0; k < Enumerable.Count(item2); k++)
                {
                        <br />
                        <img src="~/images/@Html.DisplayFor(modelItem2 => item2[k].FileName)" style="@(k != 0 ? "display: none" : "" ) " />
                        <br />
                    }

                </div>

        </div>

    }
</div>

所以我正在尝试使用这段代码

$(this).text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'))

将数据传递给“nav-informer”div，但它不会起作用。有谁知道在这种情况下该怎么办？抱歉，如果这是一个愚蠢的问题，我是 jQuery 的新手。

更新

这是呈现的 HTML 页面:

<div class="container">

    <div class="row">
        <div class="col-md-4 col-md-offset-4 text-center">
            <br />
            Galeria Um
            <br />
        </div>
    </div>
    <div class="row"><div class="col-md-4 col-md-offset-4 text-center"><div class="nav-informer"></div></div></div>
    <div class="row">
            <div class="photoset center-block">



                    <br />
                    <img src="/images/572fdd6b-13eb-48d2-8940-23da73e056c0.JPG" style=" " />
                    <br />
                    <br />
                    <img src="/images/018a55be-a8a7-4412-8415-1678d01eb6a2.JPG" style="display: none " />
                    <br />
                    <br />
                    <img src="/images/e5b0bdcb-d517-49a5-818b-245d46c0a0d9.JPG" style="display: none " />
                    <br />

            </div>

    </div>
    <div class="row">
        <div class="col-md-4 col-md-offset-4 text-center">
            <br />
            Galeria Dois
            <br />
        </div>
    </div>
    <div class="row"><div class="col-md-4 col-md-offset-4 text-center"><div class="nav-informer"></div></div></div>
    <div class="row">
            <div class="photoset center-block">



                    <br />
                    <img src="/images/fdc2e9fd-978a-4150-87af-483e34f68798.JPG" style=" " />
                    <br />
                    <br />
                    <img src="/images/b17d169d-e5ed-45cd-9901-1d9dc294c873.JPG" style="display: none " />
                    <br />
                    <br />
                    <img src="/images/3ad1ae20-7102-4d69-b658-7b3d8cbfb9e8.JPG" style="display: none " />
                    <br />
                    <br />
                    <img src="/images/4ef03a84-da00-4f93-b3a2-839ac2ec9ac2.JPG" style="display: none " />
                    <br />

            </div>

    </div>

Answer 1

因此，由于您是 jQuery 的新手，所以 $(this) 的使用基本上意味着“我已经开始处理的元素”，在您的情况下是 。照片集。所以 $(this) = $('.photoset')

如果你想让那行文本进入你的 .nav-informer div，你需要将 $(this) 更改为 $(' .nav-informer')

$('.nav-informer').text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'));

更新

所以看起来你需要遍历层次结构。每个“画廊”都是一个 .container 吗？如果是这样，试试这个:

$(this).closest('.container').find('.nav-informer').text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'));

.closest() 向上遍历层次结构，试图找到与您开始的元素最近的父级。 (在我们的例子中是 $(this))。

'.find()' 做相反的事情，它向下遍历层次结构以从之前的点找到相关元素的第一个实例。

将它们加在一起，我喜欢做的是 .closest() 到您要查找的元素的父级和 .find() 元素在那之后。我觉得 .parents()、.children() 和 .siblings() 变得很乱。

更新 2

好吧，我现在明白了 - 你导出每个画廊的方式最终可能会有点冒险，如果可能的话，我建议将你的画廊和线人放在同一个容器中，但如果你要离开它像这样，试试这个:

$(this).closest('.row').prev('.row').find('.nav-informer').text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'));

因此，使用 .parent() 将仅遍历单个父级，如果您需要更上层，您可以使用 .parents()(带有S) 或我最喜欢的 .closest()。然后，一旦你达到你需要去的水平，你可以使用 .siblings()，或者在我们的例子中，因为你的 .nav-informer 总是 在.photoset 之前的.row 中，您需要使用.prev()。这将选择直接在您当前所在的 div 之前写入的 div，处于同一级别。

检查 This Fiddle看一个简单的例子。