Question

我有以下代码段：

function refreshListeners() {
    $('div.element').each(function () {
        xid = $(this).find('input.xid').val();
        xpath = $(this).find('input.xpath').val();
        detailbtnobj = $(this).find('span.detailbutton');
        downloadbtnobj = $(this).find('span.downloadbutton');
        $(downloadbtnobj).click(function () {
            $('#popup').bPopup({
                contentContainer: '#popupcontent',
                loadUrl: 'ajax.php?module=request-detail&xid=' + xid + '&c=dl&xpath=' + xpath
            });
        });
        $(detailbtnobj).click(function () {
            $('#popup').bPopup({
                contentContainer: '#popupcontent',
                loadUrl: 'ajax.php?module=request-detail&xid=' + xid + '&c=de&xpath=' + xpath
            });
        });
    });
}

我的问题是，每个“detailbtnobj”各自，每个Detail-Button都有相同的点击监听器。

html看起来像这样：

<div class="element highlight">

    <input class="xid" value="48026" type="hidden">

    <input class="xpath" value="/m/48026/Download-Title.html" type="hidden">

    <p class="title">Download Title </p>

    <img src="48026-4b19dc03.JPG">

    <p class="descriptiontext">Description casaois aoisj diaj ds jaoj idj</p>

    <p class="countsrc">25 Sources</p>

    <p class="buttonset">

        <span class="detailbutton">Details</span><span class="downloadbutton">Download</span>

    </p>

</div>

我有多个像这样的对象，它们也是由ajax实时搜索生成的。在搜索函数之后，刷新了refreshListeners（），它应该在每个项目上打开（不同的）popUp。

但正如我所说，现在每个Button都会打开popUp，其中包含最后一个“.element”的凭据。

任何提示？：（

提前致谢

Answer 1

在循环遍历所有元素时，您将覆盖xid，xpath，detailbtnobj和downloadbtnobj的值。这对于detailbtnobj和downloadbtnobj来说不会有问题，因为你立即使用它们，但是在click事件触发之前不会使用xid和xpath变量，到那时它们指向别的东西（分配的最后一个值）。

一个简单的解决方法是通过使用'var'明确地声明它们，使这些变量的范围成为每个函数的局部。

$('div.element').each(function () {
        var xid = $(this).find('input.xid').val();
        var xpath = $(this).find('input.xpath').val();
        ...
});

Answer 2

您可以使用.data()，它存储与匹配元素关联的任意数据，或者在指定数据存储中返回匹配元素集中第一个元素的值。

在这里，我使用 .data（）和元素保存了 loadUrl ，当您点击数据时，将获取并使用 p>

function refreshListeners() {
    $('div.element').each(function () {
        xid = $(this).find('input.xid').val();
        xpath = $(this).find('input.xpath').val();
        detailbtnobj = $(this).find('span.detailbutton');
        detailbtnobj..data('loadUrl', 'ajax.php?module=request-detail&xid=' + xid + '&c=de&xpath=' + xpath);
        downloadbtnobj = $(this).find('span.downloadbutton');
        downloadbtnobj.data('loadUrl', 'ajax.php?module=request-detail&xid=' + xid + '&c=dl&xpath=' + xpath);
    });
    $('span.detailbutton, span.downloadbutton').click(function () {
        $('#popup').bPopup({
            contentContainer: '#popupcontent',
            loadUrl: $(this).data('loadUrl')
        });
    });
}

关于jquery的.each问题

2 个答案: