![](/img/trans.png)
[英]How to Sort the table column both ascending and descending using JQuery?
[英]JQuery Sort ascending and descending (Not a table)
我對MVC5中的價格排序腳本有疑問
這是一個視圖
@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">$@Model.Product_Discount</span>
@if (Model.Product_Discount == Model.Product_Price)
{
}
else
{
<del>$@Model.Product_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>
當我單擊“按價格排序”時,此問題運行良好,但是數據重復。 因為foreach。 但是我無法刪除此foreach。 如果有的話,請幫助我修復此代碼或新代碼。 不桌子
我使用了您的代碼,最后得到了與Stephen在他的評論中談論的相同的解決方案(我在完成后馬上看到了)。
這是一個工作片段,我在其中添加了一些值來對其進行仿真:
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>
希望對您有所幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.