使用数据属性和JS对div进行排序
使用数据属性和JS对div进行排序
提问于 2016-12-27 21:47:57
大约5个月前，我问了一个几乎相同的问题，得到了一个很好的答案，在当时看来是可行的。从那以后，我休息了一段时间，没有看过一行代码。现在我有了一些空闲时间，我意识到我对Javascript已经生疏了。
链接到前面的问题：https://stackoverflow.com/questions/38470543/sort-divs-using-data-attributes-and-javascript
这是我现在的JSFiddle。jsfiddle.net/wtckhkdq/3/
如您所见，我有4个div，具有各种数据属性，包括价格、上市日期和字母顺序。我试图使脚本工作，以便当按下每个按钮时，它会根据引用的函数对div进行排序。我的JSFiddle将无法正常运行，在多次查看它之后，我似乎找不到出了什么问题。提前谢谢大家，祝大家新年快乐！
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-12-27 21:56:21
- 您需要包括
jquery库才能使用它。 - 在jsfiddle中，由于他们编写最终输出生成器的方式，js-作用域设置存在问题，所以您创建的函数在html块中是不可见的。您可以通过在jsfiddle中将
function sortDateNewOld (){更改为sortDateNewOld = function(){来具体解决这一问题。
这是一个修复程序(而且一切都正常)
var divList = $(".listing");
function sortDateNewOld() {
divList.sort(function(a, b){ return $(b).data("date")-$(a).data("date")});
$("#list").html(divList);
}
function sortDateOldNew(){
divList.sort(function(a, b){ return $(a).data("date")-$(b).data("date")});
$("#list").html(divList);}
function sortPriceHighLow(){
divList.sort(function(a, b){ return $(b).data("price")-$(a).data("price")});
$("#list").html(divList);}
function sortPriceLowHigh(){
divList.sort(function(a, b){ return $(a).data("price")-$(b).data("price")});
$("#list").html(divList);}
function sortAlphAZ(){
divList.sort(function(a, b){ return $(a).data("alph")-$(b).data("alph")});
$("#list").html(divList);}
function sortAlphZA(){
divList.sort(function(a, b){ return $(b).data("alph")-$(a).data("alph")});
$("#list").html(divList);}.button {
font-size: 15px; width: 120px; height: 30px; background-color: white; display: inline-block; cursor: pointer;}
.listing {
width: 342px; height: 282px; border-radius: 7px; background-color: #f1f1f1; margin: auto; margin-top: 80px; position: relative; box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.15);}
.listinginfo {
width: 342px; height: 64px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; background-color: white; position: absolute; bottom: 0; left: 0; box-shadow: 0px -4px 10px rgba(0, 0, 0, 0.05); font-size: 10px;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" onclick="sortDateNewOld()">Date New-Old</button>
<button class="button" onclick="sortDateOldNew()">Date Old-New</button>
<button class="button" onclick="sortAlphAZ()">Name A-Z</button>
<button class="button" onclick="sortAlphZA()">Name Z-A</button>
<button class="button" onclick="sortPriceHighLow()">Price High-Low</button>
<button class="button" onclick="sortPriceLowHigh()">Price Low-High</button>
<div id="list">
<!------------------------------------------------------------->
<div class="listing"
data-price="99"
data-date="20171201"
data-alph="010101"
style="background-image: url()">
<div class="listinginfo">
AAA<br>
Price: $99<br>
Date: December 1, 2017
</div>
</div>
<!------------------------------------------------------------->
<!------------------------------------------------------------->
<div class="listing"
data-price="199"
data-date="20171202"
data-alph="010102"
style="background-image: url()">
<div class="listinginfo">
AAB<br>
Price: $199<br>
Date: December 2, 2017
</div>
</div>
<!------------------------------------------------------------->
<!------------------------------------------------------------->
<div class="listing"
data-price="299"
data-date="20171203"
data-alph="010103"
style="background-image: url()">
<div class="listinginfo">
AAC<br>
Price: $299<br>
Date: December 3, 2017
</div>
</div>
<!------------------------------------------------------------->
<!------------------------------------------------------------->
<div class="listing"
data-price="399"
data-date="20171204"
data-alph="010104"
style="background-image: url()">
<div class="listinginfo">
AAD<br>
Price: $399<br>
Date: December 4, 2017
</div>
</div>
<!------------------------------------------------------------->
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41352593
复制相关文章
相似问题
腾讯云开发者
