按按钮降序和升序排序

时间：2018-12-29 09:45:37

标签： javascript jquery 

This button has three modes: First, Descending, Second Ascending Mode and Third Mode; No Sorting and I want to sort with jQuery.

<div class="full-item">
	<div class="button-item">
		<button id="Sort-item">Sort by</button>
	</div>
	<div class="item-sort">
		<div class="item">
			<div class="pic"></div>
			<div class="time" style="background: red;"><span>15:20</span></div>
		</div>
		<div class="item">
			<div class="pic"></div>
			<div class="time"><span>13:10</span></div>
		</div>
		<div class="item">
			<div class="pic"></div>
			<div class="time"><span>18:40</span></div>
		</div>
	</div>
</div>

<body>

<style>
body{
	margin: 0 auto;
	padding: 0 auto;
	background: skyblue;
}	

.full-item{
	width: 800px;
	height: 600px;
	margin: 50px auto;
	background: grey;
}

.full-item .button-item{
	width: 100%;
	height: 80px;
	background: #B33771;

}

.full-item .button-item button{
	margin: 30px 45%;
}

.full-item .item-sort{
	width: 100%;
	height: 500px;
	background: white;
	margin-top: 10px;
}

.full-item .item-sort:first-child{
	margin-top: 10px;
}


.full-item .item-sort .item{
	width: 90%;
	height: 140px;
	background: red;
	/*padding: 10px;*/
	margin: 10px auto;
}

.item-sort .item .pic{
	width: 30%;
	height: 100%;
	background: #3B3B98;
	float: left;
}

.item-sort .item .time{
	width: 70%;
	height: 100%;
	background: #1B9CFC;
	float: right;
}

.item-sort .item .time span{
	color: white;
	text-align: center;
	display: block;
	line-height: 100px;
}


</style>

<div class="full-item">
	<div class="button-item">
		<button id="Sort-item">Sort by</button>
	</div>
	<div class="item-sort">
		<div class="item">
			<div class="pic"></div>
			<div class="time" style="background: red;"><span>15:20</span></div>
		</div>
		<div class="item">
			<div class="pic"></div>
			<div class="time"><span>13:10</span></div>
		</div>
		<div class="item">
			<div class="pic"></div>
			<div class="time"><span>18:40</span></div>
		</div>
	</div>
</div>

</body>

	$("#Sort-item").click(function(){

		$(".item").sort(function(a, b) {
		  return new Date($(a).find(".timeA")) > new Date($(b).find(".timeB"));
		}).each(function() {
		  $(".item-sort").prepend(this);
		})

	});
<body>

<style>
body{margin: 0 auto;padding: 0 auto;background: skyblue;}	
.full-item{width: 800px;height: 600px;margin: 50px auto;background: grey;}
.full-item .button-item{width: 100%;height: 80px;background: #B33771;}
.full-item .button-item button{margin: 30px 45%;}
.full-item .item-sort{width: 100%;height: 500px;background: white;margin-top: 10px;}
.full-item .item-sort:first-child{margin-top: 10px;}
.full-item .item-sort .item{width: 90%;height: 140px;background: red;margin: 10px auto;}
.item-sort .item .pic{width: 30%;height: 100%;background: #3B3B98;float: left;}
.item-sort .item .time{width: 70%;height: 100%;background: #1B9CFC;float: right;}
.item-sort .item .time span{color: white;text-align: center;display: block;line-height: 100px;}
</style>
<div class="full-item">
	<div class="button-item">
		<button id="Sort-item">Sort by</button>
	</div>
	<div class="item-sort">
		<div class="item">
			<div class="pic"></div>
			<div class="time"><span>15:20</span></div>
		</div>
		<div class="item">
			<div class="pic"></div>
			<div class="time"><span>13:10</span></div>
		</div>
		<div class="item">
			<div class="pic"></div>
			<div class="time"><span>18:40</span></div>
		</div>
	</div>
</div>

</body>

1 个答案:

答案 0 :(得分：1)

我不知道您是如何划分文件的，因为您的问题有很多摘要，也不清楚什么地方去了，但是您可以在下面的Vanilla JS中找到解决问题的方法（重要的是要先了解Vanilla JS如何处理此问题跳转到JQuery）。

我尝试尽可能保持原始CSS的真实感（尽管认为它有点夸张），然后将整个内容合并到一个文档中。去吧：

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    body {
      margin: 0 auto;
      padding: 0 auto;
      background: skyblue;
    }

    .full-item {
      width: 800px;
      height: 600px;
      margin: 50px auto;
      background: grey;
    }

    .full-item .button-item {
      width: 100%;
      height: 80px;
      background: #B33771;
    }

    .full-item .button-item button {
      margin: 30px 45%;
    }

    .full-item .item-sort {
      width: 100%;
      height: 500px;
      background: white;
      margin-top: 10px;
    }

    .full-item .item-sort:first-child {
      margin-top: 10px;
    }

    .full-item .item-sort .item {
      width: 90%;
      height: 140px;
      background: red;
      margin: 10px auto;
    }

    .item-sort .item .pic {
      width: 30%;
      height: 100%;
      background: #3B3B98;
      float: left;
    }

    .item-sort .item .time {
      width: 70%;
      height: 100%;
      background: #1B9CFC;
      float: right;
    }

    .item-sort .item .time span {
      color: white;
      text-align: center;
      display: block;
      line-height: 100px;
    }
  </style>
</head>

<body>
  <div class="full-item">
    <div class="buttons">
      <div class="button-item">
        <button id="Sort-item-asc">Sort Asc</button>
      </div>
      <div class="button-item">
        <button id="Sort-item-desc">Sort Desc</button>
      </div>
      <div class="button-item">
        <button id="Sort-item-no">No Sort</button>
      </div>
    </div>
    <div class="item-sort">
      <div class="item">
        <div class="pic"></div>
        <div class="time"><span>15:20</span></div>
      </div>
      <div class="item">
        <div class="pic"></div>
        <div class="time"><span>13:10</span></div>
      </div>
      <div class="item">
        <div class="pic"></div>
        <div class="time"><span>18:40</span></div>
      </div>
    </div>
  </div>

  <script>
    const buttonAsc = document.getElementById("Sort-item-asc")
    const buttonDesc = document.getElementById("Sort-item-desc")
    const buttonNo = document.getElementById("Sort-item-no")
    const times = document.getElementsByClassName("time")
    const originalHours = []
    for (let i = 0; i < times.length; i++) {
      const hour = times[i].innerText;
      originalHours.push(hour)
    }
    buttonAsc.onclick = function () {
      let hours = []
      for (let i = 0; i < times.length; i++) {
        const hour = times[i].innerText;
        hours.push(hour)
      }
      hours.sort()
      for (let i = 0; i < hours.length; i++) {
        times[i].firstElementChild.innerText = hours[i];
      }
    }
    buttonDesc.onclick = function () {
      let hours = []
      for (let i = 0; i < times.length; i++) {
        const hour = times[i].innerText;
        hours.push(hour)
      }
      hours.sort()
      hours.reverse()
      for (let i = 0; i < hours.length; i++) {
        times[i].firstElementChild.innerText = hours[i];
      }
    }
    buttonNo.onclick = function () {
      for (let i = 0; i < originalHours.length; i++) {
        times[i].firstElementChild.innerText = originalHours[i];
      }
    }
  </script>
</body>

</html>

相关问题
最新问题