jquery - CSS 日期选择器

Question

附件是模型和我目前的解决方案。问题是当两个数字彼此相邻(水平或垂直)时，它们应该合并，如模型中所示。

例如:选择的数字 48-49-50 应该是这样的:

下一张截图中的数字 38-39-40-41

我将 AddClass("active") 与以下参数一起用于每个点击的数字:

  a.active {
    background-color: #3E9EA5;
    border-radius: 9px 9px 9px 9px;
    color: white;
  }

Answer 1

您可以通过使用 CSS 选择器和 javascript 来实现此合并。由于您使用了 jQuery 标记，我使用它来简化编码。

该解决方案着眼于被点击的元素以及他在位置 +-10 和 +-1 的 sibling 。因此，它设置了合并。 代码中添加了注释，希望对您有所帮助。 请随时提出任何问题。

$(document).ready(function(){
  var awesomeDates = $(".awesome-date");
  
  awesomeDates.on("click", function(){
    //Some variables to store the siblings in...
    var prevElement, nextElement, topElement, bottomElement;
    // basically toggleClass
    if($(this).hasClass("active")){
      $(this).removeClass("active");
      prevElement = $(this).prev();
      //if the element before was merged with the currently clicked list-item
      if(prevElement.hasClass("merge-right")){
        //unmerge
        prevElement.removeClass("merge-right");
      }
      //select element 10 siblings back
      topElement = $(this).prevAll().eq(9);
      //if the element above was merged
      if(topElement.hasClass("active")){
        //remove merge classes for both 
        $(this).removeClass("merge-top");
        topElement.removeClass("merge-bottom");
      }
      //select element 10 siblings ahead
      bottomElement = $(this).nextAll().eq(9);
      //if the currently clicked element was merged with element underneath
      if(bottomElement.hasClass("active")){
        //Unmerge both
        $(this).removeClass("merge-bottom");
        bottomElement.removeClass("merge-top");
      }
    }else{
      $(this).addClass("active");
      prevElement = $(this).prev();
      nextElement = $(this).next();
      //if direct siblings are also active
      if(prevElement.hasClass("active")){
        //Merge
        prevElement.addClass("merge-right");
      }
      if(nextElement.hasClass("active")){
        //Merge
        $(this).addClass("merge-right");
      }
      //select element 10 siblings back
      topElement = $(this).prevAll().eq(9);
      //if the element above is also active
      if(topElement.hasClass("active")){
        //Merge
        $(this).addClass("merge-top");
        topElement.addClass("merge-bottom");
      }
      //select element 10 siblings ahead
      bottomElement = $(this).nextAll().eq(9);
      //if the element below is also active
      if(bottomElement.hasClass("active")){
        //Merge
        $(this).addClass("merge-bottom");
        bottomElement.addClass("merge-top");
      }
    }
  });
});

.dater {
  display: block;
  width: 330px;
  height: 250px;
  background-color: #f7f7f7;
}

.dater-list {
  margin: 0;
  padding: 2px;
  height: auto;
}

.dater-list .awesome-date {
  display: inline-block;
  float: left;
  width: 20px;
  height: 20px;
  padding: 5px;
  border-radius: 50%;
  text-align: center;
  background-color: #fff;
  margin: 1px 1px 0 1px;
  transition: all 1s ease;
}

.dater-list .awesome-date.active{
  background-color: #1abc9c;
  color: #fff;
}
/* ALL elements except for every number dividable by 10 + 1*/
.dater-list li.awesome-date.active + li.awesome-date.active:not(:nth-child(10n+1)){
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  margin-left: 0;
  padding-left: 6px;
}

/* ALL elements with class merge-right except for every number dividable by 10 */
.dater-list li.awesome-date.active.merge-right:not(:nth-child(10n)){
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  margin-right: 0;
  padding-right: 6px;
}

/* ALL elements with class merge-top except for the first row/10 elements */
.dater-list li.awesome-date.active.merge-top:not(:nth-child(-n+10)){
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  margin-top: 0;
  padding-top: 6px;
}

/* ALL elements with class merge-bottom except filter not needed and hence not applied */
.dater-list li.awesome-date.active.merge-bottom{
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  margin-bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dater">
  <ul class="dater-list">
    <li class="awesome-date"><span>1</span></li>
    <li class="awesome-date"><span>2</span></li>
    <li class="awesome-date"><span>3</span></li>
    <li class="awesome-date"><span>4</span></li>
    <li class="awesome-date"><span>5</span></li>
    <li class="awesome-date"><span>6</span></li>
    <li class="awesome-date"><span>7</span></li>
    <li class="awesome-date"><span>8</span></li>
    <li class="awesome-date"><span>9</span></li>
    <li class="awesome-date"><span>10</span></li>
    <li class="awesome-date"><span>11</span></li>
    <li class="awesome-date"><span>12</span></li>
    <li class="awesome-date"><span>13</span></li>
    <li class="awesome-date"><span>14</span></li>
    <li class="awesome-date"><span>15</span></li>
    <li class="awesome-date"><span>16</span></li>
    <li class="awesome-date"><span>17</span></li>
    <li class="awesome-date"><span>18</span></li>
    <li class="awesome-date"><span>19</span></li>
    <li class="awesome-date"><span>20</span></li>
    <li class="awesome-date"><span>21</span></li>
    <li class="awesome-date"><span>22</span></li>
    <li class="awesome-date"><span>23</span></li>
    <li class="awesome-date"><span>24</span></li>
    <li class="awesome-date"><span>25</span></li>
    <li class="awesome-date"><span>26</span></li>
    <li class="awesome-date"><span>27</span></li>
    <li class="awesome-date"><span>28</span></li>
    <li class="awesome-date"><span>29</span></li>
    <li class="awesome-date"><span>30</span></li>
  </ul>
</div>

附言。下次请自己添加 HTML 和 CSS。