从左侧和右侧元素

Question

我需要帮助。这是我想要的最终结果。用户只能从众多元素中选择两个。左边的元素总是绿色，右边的元素总是蓝色，一次只能选择两个元素。

我知道整体流程：

1. 获取具有活动类的最近元素
2. 删除活动班级
3. 将活动类设置为当前单击的元素
4. 重置颜色。

但我现在的代码失败了。请你看看我的即将到来的短片吗？ （我认为.nearest（）函数可能是问题）

＆＃13;
＆＃13;
$.fn.nearest = function(selector) {
  // base case if we can't find anything
  if (this.length == 0)
    return this;
  var nearestSibling = this.prevAll(selector + ':first');
  if (nearestSibling.length > 0)
    return nearestSibling;
  return this.parent().nearest(selector);
};
jQuery(document).on('click', '.page-list-item.is-tiny', function() {
  $(this).parent().nearest(".active").removeClass("active a-active b-active");
  $(this).parent().addClass("active");
  var selectedElements = $('.ab-pages > .active');
  var first = $(selectedElements[0]);
  var second = $(selectedElements[1]);
  first.removeClass("a-active b-active").addClass("a-active");
  second.removeClass("a-active b-active").addClass("b-active");
});
＆＃13;
p {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

img {
  height: auto;
  max-width: 100%;
}

img {
  height: auto;
  max-width: 100%;
}

span {
  font-style: inherit;
  font-weight: inherit;
}

.title {
  word-break: break-word;
}

.title span {
  font-weight: inherit;
}

.title {
  color: #363636;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.125;
}

.column {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 0.75rem;
}

@media screen and (min-width: 769px),
print {
  .column.is-one-fifth {
    flex: none;
    width: 20%;
  }
}

.columns {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  margin-top: -0.75rem;
}

.columns:not(:last-child) {
  margin-bottom: calc(1.5rem - 0.75rem);
}

@media screen and (min-width: 769px),
print {
  .columns:not(.is-desktop) {
    display: flex;
  }
}

.center {
  text-align: center !important;
}

.padding-top-1 {
  padding-top: 10px !important;
}

.padding-bottom-1 {
  padding-bottom: 10px !important;
}

.page-list-item {
  background: #fff;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  border: 3px solid transparent;
  overflow: hidden;
}

.page-list-item:hover {
  border-color: #22B66E;
  -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
}

.page-list-item-body .title {
  font-size: 1em;
  color: #606F81;
}

.page-list-item.is-tiny {
  max-width: 180px;
  overflow: hidden;
  -webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.4);
  border: none;
}

.active:nth-of-type(1) .page-list-item,
.a-active .page-list-item {
  -webkit-box-shadow: 0 0 0 3px #22B66E !important;
  box-shadow: 0 0 0 3px #22B66E !important;
}

.b-active .page-list-item {
  -webkit-box-shadow: 0 0 0 3px #53A6FA !important;
  box-shadow: 0 0 0 3px #53A6FA !important;
}

.ab-pages {
  padding: 30px;
}

.ab-pages .page-list-item {
  padding-top: 100px;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="columns ab-pages is-mobile">
  <div class="column is-one-fifth active a-active">
    <div id="1" class="page-list-item is-tiny">
      <div><img src=""></div>
      <div class="page-list-item-body center">
        <p class="title padding-top-1 padding-bottom-1"><span>Nicename</span></p>
      </div>
    </div>
  </div>
  <div class="column is-one-fifth">
    <div id="2" class="page-list-item is-tiny">
      <div><img src=""></div>
      <div class="page-list-item-body center">
        <p class="title padding-top-1 padding-bottom-1"><span>Nicename....</span></p>
      </div>
    </div>
  </div>
  <div class="column is-one-fifth active b-active">
    <div id="3" class="page-list-item is-tiny">
      <div><img src=""></div>
      <div class="page-list-item-body center">
        <p class="title padding-top-1 padding-bottom-1"><span>New page</span></p>
      </div>
    </div>
  </div>
  <div class="column is-one-fifth">
    <div id="4" class="page-list-item is-tiny">
      <div><img src=""></div>
      <div class="page-list-item-body center">
        <p class="title padding-top-1 padding-bottom-1"><span>New page 4</span></p>
      </div>
    </div>
  </div>
  <div class="column is-one-fifth">
    <div id="5" class="page-list-item is-tiny">
      <div><img src=""></div>
      <div class="page-list-item-body center">
        <p class="title padding-top-1 padding-bottom-1"><span>New page 5</span></p>
      </div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

我现在将根据上述用户的评论继续回答我自己的问题。

// Get the closest number element of an array
function closest(array, num) {
  var i = 0;
  var minDiff = 1000;
  var ans;
  for (i in array) {
    var m = Math.abs(num - array[i]);
    if (m < minDiff) {
      minDiff = m;
      ans = array[i];
    }
  }
  return ans;
}

// Removes active classes and adds them afresh
function updateSelection() {
  $(".ab-pages > .active").removeClass("active a-active b-active");
  $("#" + selected[0]).parent().addClass("active a-active");
  $("#" + selected[1]).parent().addClass("active b-active");
}

// For sorting an array by number value
function sortNumber(a, b) {
  return a - b;
}

// Initialise with the array values 1, 4
var selected = [1, 4];

jQuery(document).on('click', '.page-list-item.is-tiny', function() {
// Numerical value representing an Element
  var id = parseInt($(this).attr("id"));
  // Closest matching number in Array
  var cl = closest(selected, id);
  // Remove closest item from Array
  var index = selected.indexOf(cl);
  if (index > -1) {
    selected.splice(index, 1);
  }
  // Append this clicked Element
  selected.push(id);
  // Sort the selected array by num ASC
  selected = selected.sort(sortNumber);
  // Reset the index of the array so that selected[0] and selected[1] are well defined
  selected = selected.filter(function() {
    return true;
  });
  // Add active classes afresh
  updateSelection();
});

p {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

img {
  height: auto;
  max-width: 100%;
}

img {
  height: auto;
  max-width: 100%;
}

span {
  font-style: inherit;
  font-weight: inherit;
}

.title {
  word-break: break-word;
}

.title span {
  font-weight: inherit;
}

.title {
  color: #363636;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.125;
}

.column {
  display: block;
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
  padding: 0.75rem;
}

@media screen and (min-width: 769px),
print {
  .column.is-one-fifth {
    flex: none;
    width: 20%;
  }
}

.columns {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  margin-top: -0.75rem;
}

.columns:not(:last-child) {
  margin-bottom: calc(1.5rem - 0.75rem);
}

@media screen and (min-width: 769px),
print {
  .columns:not(.is-desktop) {
    display: flex;
  }
}

.center {
  text-align: center !important;
}

.padding-top-1 {
  padding-top: 10px !important;
}

.padding-bottom-1 {
  padding-bottom: 10px !important;
}

.page-list-item {
  background: #fff;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  border: 3px solid transparent;
  overflow: hidden;
}

.page-list-item:hover {
  border-color: #22B66E;
  -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
}

.page-list-item-body .title {
  font-size: 1em;
  color: #606F81;
}

.page-list-item.is-tiny {
  max-width: 180px;
  overflow: hidden;
  -webkit-box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.4);
  border: none;
}

.a-active .page-list-item {
  -webkit-box-shadow: 0 0 0 3px #22B66E !important;
  box-shadow: 0 0 0 3px #22B66E !important;
}

.b-active .page-list-item {
  -webkit-box-shadow: 0 0 0 3px #53A6FA !important;
  box-shadow: 0 0 0 3px #53A6FA !important;
}

.ab-pages {
  padding: 30px;
}

.ab-pages .page-list-item {
  padding-top: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="columns ab-pages is-mobile">
  <div class="column is-one-fifth active a-active">
    <div id="1" class="page-list-item is-tiny">
      <div><img src=""></div>
      <div class="page-list-item-body center">
        <p class="title padding-top-1 padding-bottom-1"><span>Nicename</span></p>
      </div>
    </div>
  </div>
  <div class="column is-one-fifth">
    <div id="2" class="page-list-item is-tiny">
      <div><img src=""></div>
      <div class="page-list-item-body center">
        <p class="title padding-top-1 padding-bottom-1"><span>Nicename....</span></p>
      </div>
    </div>
  </div>
  <div class="column is-one-fifth active b-active">
    <div id="3" class="page-list-item is-tiny">
      <div><img src=""></div>
      <div class="page-list-item-body center">
        <p class="title padding-top-1 padding-bottom-1"><span>New page</span></p>
      </div>
    </div>
  </div>
  <div class="column is-one-fifth">
    <div id="4" class="page-list-item is-tiny">
      <div><img src=""></div>
      <div class="page-list-item-body center">
        <p class="title padding-top-1 padding-bottom-1"><span>New page 4</span></p>
      </div>
    </div>
  </div>
  <div class="column is-one-fifth">
    <div id="5" class="page-list-item is-tiny">
      <div><img src=""></div>
      <div class="page-list-item-body center">
        <p class="title padding-top-1 padding-bottom-1"><span>New page 5</span></p>
      </div>
    </div>
  </div>
</div>