极客观点
项目管理
HarmonyOS
@foreach (var category in Model.Categories)
{
//-这里循环开始，比如Model.Categories里面有3组数据
<div class="home-page-category-tabs" data-get-products-url="@Url.Action("GetHomePageProductsByCategoryId", "UrbanTheme")">
<div class="titles">
<b>@(index)F</b><a data-category-id="@category.Id" title="@category.Name" style="font-size:20px;margin-left: -5px;"> @category.Name</a>
<ul>
@foreach (var ca in category.SubCategories)
{
<li>
<a class="home-page-category-anchor" data-category-id="@ca.Id" title="@ca.Name">@ca.Name</a>
</li>
}
<li style="float:right;">
<a class="home-page-category-anchor" data-category-id="@category.Id" href="@Url.RouteUrl("Category", new { SeName = category.SeName })" title="@category.Name">All Other</a>
</li>
</ul>
</div>
//-- 这里是下面的内容
<div class="contents">
@foreach (var subca in category.SubCategories)
{
<div class="home-page-category-content" data-category-id="@subca.Id"></div>
}
</div>
</div>
index++;
}
<script type="text/javascript">
$(document).ready(function () {
/*首页的分类产品数据 */
homePageCategoriesInTabs();
$('.home-page-category-tabs .home-page-category-anchor').first().click();
});
function homePageCategoriesInTabs() {
if ($('.home-page-category-tabs').length == 0) {
return;
}
var getProductsUrl = $('.home-page-category-tabs').attr('data-get-products-url');
if (typeof getProductsUrl == 'undefined' || getProductsUrl == '') {
return;
}
$('.home-page-category-tabs .home-page-category-anchor').on('click', function () {
var currentThis = $(this);
var categoryId = currentThis.attr('data-category-id');
if (typeof categoryId == 'undefined' || categoryId == '' || categoryId == '0') {
return;
}
var categoryContentElement = $('.home-page-category-tabs .home-page-category-content[data-category-id="' + categoryId + '"]');
if (categoryContentElement.length == 0) {
return;
}
var isAlreadyLoaded = currentThis.attr('data-is-already-loaded');
if (typeof isAlreadyLoaded == 'undefined' || isAlreadyLoaded != 'true') {
currentThis.attr('data-is-already-loaded', 'true');
//$('.home-page-category-tabs .ajax-loading-overlay1').addClass('active');
$.ajax({
cache: false,
type: 'POST',
data: {
'id': categoryId
},
url: getProductsUrl
}).done(function (data) {
if (data.trim().length == 0) {
data = '<div class="no-products-found">' + '@T("SevenSpikes.Themes.Urban.HomePageCategories.NoProductsFound")' + '</div>';
}
categoryContentElement.html(data);
// Show the selected tab, when its content is loaded
currentThis.parent().addClass('active').siblings().removeClass('active');
categoryContentElement.addClass('active').siblings('.home-page-category-content').removeClass('active');
// Ajax Cart for the selected tab
if (typeof nopAjaxCart !== "undefined" && nopAjaxCart.replaceAddToCartButtonsExternal !== undefined) {
nopAjaxCart.replaceAddToCartButtonsExternal();
}
// Quick View for the selected tab
if (typeof GetProductSelector !== "undefined" && typeof GetQuickViewButtonParentSelector !== "undefined" && typeof AddQuickViewButtons !== "undefined") {
var productSelector = GetProductSelector();
if (productSelector == "") {
return;
}
var quickViewButtonParentSelector = GetQuickViewButtonParentSelector(productSelector);
AddQuickViewButtons(productSelector, quickViewButtonParentSelector);
}
// Product Ribbons for the selected tab
if (typeof nopProductRibbons != "undefined" && nopProductRibbons.showRibbons != undefined) {
nopProductRibbons.showRibbons();
}
}).always(function () {
$('.home-page-category-tabs .ajax-loading-overlay').removeClass('active');
$('.home-page-category-tabs').trigger('homePageCategoriesProductsLoaded');
});
} else {
currentThis.parent().addClass('active').siblings().removeClass('active');
categoryContentElement.addClass('active').siblings().removeClass('active');
}
});
}
</script>
循环3次，只有第一个div 的（第一个选项卡）数据显示出来，
下面2个div的（第一个选项卡）数据没有显示出来，事实上div里面的数据都有，但是就是只显示第一个div当中的第一个选项卡的数据， 第2个div当中第1选显卡，和第3个div当中第1选显卡数据无法显示，
@foreach (var category in Model.Categories)
{
//-这里循环开始，比如Model.Categories里面有3组数据
<div class="home-page-category-tabs" data-get-products-url="@Url.Action("GetHomePageProductsByCategoryId", "UrbanTheme")">
</div>
index++;
}