从不同的表中获取值并附加到 jquery

Question

我正在使用两张表，一张用于产品名称，一张用于产品图像路径... 我能够获取图像路径并将图像动态添加到 html 中。它工作正常。

问题是当我想在悬停时添加图像的标题时，它是顶部的 div 类 图片，我使用jQuery的每个函数更改悬停div上的标题，标题被连接起来 而不是添加到特定图像中。

这是我从表路径附加图像的代码..

<script type="text/javascript">
    $(document).ready(function () {
        $('#mainContentPlaceholder_productPathGridView').hide(); //Hides ImagePath Gridview

        var arr = []; //Creates an Array Path Arr
        $("#mainContentPlaceholder_productPathGridView td").each(function () {  //Loops through GridView Td (Table Columns)
            arr.push($(this).text());
        });

        // Starts adding Images to the  Gallery 
        $.each(arr, function (index, imageLocation) {
            $(".megafolio-container").append('<div class="mega-entry jeans cat-all" data-src="' + imageLocation + '"' + 'data-width="395" data-height="507"><div class="mega-hover"><div class="mega-hovertitle"><h2 class="productNameTitle"></h2><a class="shopButton" href="itemDetails.aspx">Details</a></div></div></div>'); //Apended New  Values
        });

    });
</script>

这是我添加的用于附加 ID 的代码：

<!-- Getting Product Names-->

<script type="text/javascript">
    $(document).ready(function () {
        $('#mainContentPlaceholder_productNameGridView').hide(); //Hides ImagePath Gridview

        var arr2 = []; //Creates an Array Path Arr
        $("#mainContentPlaceholder_productNameGridView td").each(function () {  //Loops through GridView Td (Table Columns)
            arr2.push($(this).text());
        });

        // Starts adding Images to the  Gallery 
        $.each(arr2, function (index, productname) {
         //   alert(productname);
           $(".productNameTitle").text(productname); //Apended New Name
        });
        });
</script>

现在问题存在，因为每个 div 上都连接了 id..

Answer 1

如果我没记错的话..为什么不使用一个循环而不是两个..您正在创建 teo 不同的数组 arr、arr2 并循环遍历它...以显示相同的文本..

试试这个

$("#mainContentPlaceholder_productNameGridView td").each(function () {  //Loops through GridView Td (Table Columns)
        $(".megafolio-container").append('<div class="mega-entry jeans cat-all" data-src="' + $(this).text() + '"' + 'data-width="395" data-height="507"><div class="mega-hover"><div class="mega-hovertitle"><h2 class="productNameTitle"></h2><a class="shopButton" href="itemDetails.aspx">Details</a></div></div></div>'); //Apended New  Values
        $(".productNameTitle").text($(this).text());
    });