2つのテーブルを使用しています。1つは製品名用、もう1つは製品の画像パス用です...画像パスを取得して、画像を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>
IDがすべてのdivに連結されるため、問題が発生します。