Question

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

EX：所选数字48-49-50应该是：

下一个屏幕截图中的数字38-39-40-41

我为每个点击的数字使用AddClass（＆＃34; active＆＃34;）和以下参数：

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

Answer 1

您可以使用CSS选择器并使用javascript来实现此合并。由于您使用了jQuery标记，因此我使用它来进行简单编码。

解决方案查看点击的元素以及位于+ -10和+ -1的兄弟姐妹。因此，它设置合并。代码中添加了评论，希望它有所帮助。随意提出任何问题。

$(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。

CSS日期选择器

1 个答案: