我在 MVC5 中排序价格的脚本有问题
这是一个 View
@model IEnumerable<WebApplication.Models.Product>
@foreach (var Model in Model){
<div class="col-md-3">
<div class="product-men">
<div class="men-pro-item simpleCart_shelfItem">
<div class="men-thumb-item">
<img src="~/Images/@Model.Product_Image" alt="" class="pro-image-front">
<img src="~/Images/@Model.Product_Image" alt="" class="pro-image-back">
<div class="men-cart-pro">
<div class="inner-men-cart-pro">
<a href="single.html" class="link-product-add-cart">Quick View</a>
</div>
</div>
</div>
<div class="item-info-product">
<h4><a href="">@Model.Product_Name</a></h4>
<div class="info-product-price">
<span class="item_price price"><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3e1a7e73515a5b52106e4c515a4b5d4a" rel="noreferrer noopener nofollow">[email protected]</a>_Discount</span>
@if (Model.Product_Discount == Model.Product_Price)
{
}
else
{
<del><a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3d7b3be9c97969fdda3819c97869087" rel="noreferrer noopener nofollow">[email protected]</a>_Price</del>}
</div>
<div class="snipcart-details top_brand_home_details item_add single-item hvr-outline-out button2">
<form action="#" method="post">
<fieldset>
<input type="hidden" name="cmd" value="_cart" />
<input type="hidden" name="add" value="1" />
<input type="hidden" name="business" value=" " />
<input type="hidden" name="item_name" value="Formal Blue Shirt" />
<input type="hidden" name="amount" value="30.99" />
<input type="hidden" name="discount_amount" value="1.00" />
<input type="hidden" name="currency_code" value="USD" />
<input type="hidden" name="return" value=" " />
<input type="hidden" name="cancel_return" value=" " />
<input type="submit" name="submit" value="Add to cart" class="button" />
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>}
片段:
var ascending = false;
$('.tab-content').on('click', '.sortByPrice', function() {
var sorted = $('.men-pro-item').sort(function(a, b) {
return (ascending ==
(convertToNumber($(a).find('.price').html()) <
convertToNumber($(b).find('.price').html()))) ? 1 : -1;
});
ascending = ascending ? false : true;
$('.product-men').html(sorted);
});
var convertToNumber = function(value) {
return parseFloat(value.replace('$', ''));
}
<!-- Need to add the html data before click, here -->
<!-- Button click sort -->
<div class="tab-content">
<h6>Sort By</h6>
<div id="filters">
<p>
<a class="sortByPrice" href="#">Sort by Price</a>
</p>
</div>
<div class="clearfix"></div>
</div>
当我单击“按价格排序”时出现此问题,此 JavaScript 运行良好,但存在重复数据。因为foreach。但我无法删除这个 foreach。帮助我修复此代码或新代码(如果有)。不是表
最佳答案
我研究了你的代码,最终得到了与斯蒂芬在他的评论中谈论的相同的解决方案(我在完成后立即看到了这一点)。
这是一个工作片段,我在其中添加了一些值来模拟它:
var ascending = false;
$('.tab-content').on('click', '.sortByPrice', function() {
var sorted = $('.men-pro-item').sort(function(a, b) {
return (ascending ==
(convertToNumber($(a).find('.price').html()) <
convertToNumber($(b).find('.price').html()))) ? 1 : -1;
});
ascending = ascending ? false : true;
$('#products').html(sorted); // Modified
});
var convertToNumber = function(value) {
return parseFloat(value.replace('$', ''));
}
h4 {
margin: 0;
}
.item-info-product * {
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="products"><!-- Added -->
<div class="col-md-3">
<div class="product-men">
<div class="men-pro-item simpleCart_shelfItem">
<div class="item-info-product">
<h4><a href="">Product_Name</a></h4>
<div class="info-product-price">
<span class="item_price price">$30.00</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="product-men">
<div class="men-pro-item simpleCart_shelfItem">
<div class="item-info-product">
<h4><a href="">Product_Name</a></h4>
<div class="info-product-price">
<span class="item_price price">$25.00</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="product-men">
<div class="men-pro-item simpleCart_shelfItem">
<div class="item-info-product">
<h4><a href="">Product_Name</a></h4>
<div class="info-product-price">
<span class="item_price price">$35.00</span>
</div>
</div>
</div>
</div>
</div>
</div> <!-- Added -->
<!-- Button click sort -->
<div class="tab-content">
<h6>Sort By:</h6>
<div id="filters">
<p><a class="sortByPrice" href="#">Price</a></p>
</div>
<div class="clearfix"></div>
</div>
希望对您有所帮助。
关于javascript - JQuery 升序和降序排序(不是表格),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50057953/