Как показать и скрыть div, основываясь на флажке, но только 3 показа в любое время - PullRequest
Новая
       1

Как показать и скрыть div, основываясь на флажке, но только 3 показа в любое время

0 голосов
/ 19 марта 2020

Я хочу, чтобы .company-01, .company-02 & .company-03 показывались при загрузке, но затем, когда флажок установлен, он показывает только максимум 3 компании одновременно. Например, 1, 2 и 3 отображаются при загрузке, но когда я отмечаю флажок 4, все они исчезают, а 4 показывает. Если флажки 2 и 3 будут установлены, мы увидим, как отображаются компании 02, 03 и 04. Если пользователь затем нажимает флажок 01, то флажок 04 скрывается, поскольку это был самый ранний установленный флажок.

Надеюсь, это имеет смысл?!?! 

var array = [];
$(".selector-checkbox").change(function() {
  if ($(this).is(":checked")) {
    array.push(this.id);
    if (array.length > 3) {
      array.splice(0, 1);
    }
    $(".selector-checkbox").prop("checked", false);
    for (var i = 0; i < array.length; i++) {
      $("#" + array[i]).prop("checked", true);
    }
  } else {
    var index = array.indexOf(this.id);
    array.splice(index, 1);
  }
});

$('#company-01').click(function() {
  $('.company-01').toggleClass('active', this.checked);
});
$('#company-02').click(function() {
  $('.company-02').toggleClass('active', this.checked);
});

$('#company-03').click(function() {
  $('.company-03').toggleClass('active', this.checked);
});

$('#company-04').click(function() {
  $('.company-04').toggleClass('active', this.checked);
});

$('#company-05').click(function() {
  $('.company-05').toggleClass('active', this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-content">
  <div class="wrapper">

    <div class="comparison-selector">
      <input type="checkbox" class="selector-checkbox" id="company-01">
      <input type="checkbox" class="selector-checkbox" id="company-02">
      <input type="checkbox" class="selector-checkbox" id="company-03">
      <input type="checkbox" class="selector-checkbox" id="company-04">
      <input type="checkbox" class="selector-checkbox" id="company-05">
      <input type="checkbox" class="selector-checkbox" id="company-06">

    </div>

    <div class="comparison-table">
      <div class="row row-flex">
        <div class="col-sm-3">
          <div class="table-item table-header feature-box">

          </div>
          <div class="table-item feature-box">
            <p>Feature 01</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 02</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 03</p>
          </div>
        </div>

        <div class="col-sm-3 company-01">
          <div class="table-item table-header feature-box">
            <h2>Company 01</h2>
          </div>
          <div class="table-item feature-box">
            <p>Feature 01</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 02</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 03</p>
          </div>
        </div>
        <div class="col-sm-3 company-02">
          <div class="table-item table-header feature-box">
            <h2>Company 02</h2>
          </div>
          <div class="table-item feature-box">
            <p>Feature 01</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 02</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 03</p>
          </div>
        </div>
        <div class="col-sm-3 company-03">
          <div class="table-item table-header feature-box">
            <h2>Company 03</h2>
          </div>
          <div class="table-item feature-box">
            <p>Feature 01</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 02</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 03</p>
          </div>
        </div>
        <div class="col-sm-3 company-04">
          <div class="table-item table-header feature-box">
            <h2>Company 03</h2>
          </div>
          <div class="table-item feature-box">
            <p>Feature 01</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 02</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 03</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>




<div class="footer">
  <div class="wrapper">
    <div class="row">
      <div class="col-sm-3">
        <h3>Title</h3>
        <ul>
          <li><a href="">Item 01</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Ответы [ 2 ]

2 голосов
/ 19 марта 2020

Попробуйте, по сути, начните скрывать их все и показывать только выбранные. 

var array = [];
$(".selector-checkbox").change(function() {
  if ($(this).is(":checked")) {
    array.push(this.id);
    if (array.length > 3) {
      array.splice(0, 1);
    }
    $(".selector-checkbox").prop("checked", false);
    for (var i = 0; i < array.length; i++) {
      $("#" + array[i]).prop("checked", true);
    }
  } else {
    var index = array.indexOf(this.id);
    array.splice(index, 1);
  }
  showHideCompanies();
});

function showHideCompanies() {
  $('.company').hide();
  $('.selector-checkbox:checked').each(function () {
     $('.' + this.id).show();
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-content">
  <div class="wrapper">

    <div class="comparison-selector">
      <input type="checkbox" class="selector-checkbox" id="company-01">
      <input type="checkbox" class="selector-checkbox" id="company-02">
      <input type="checkbox" class="selector-checkbox" id="company-03">
      <input type="checkbox" class="selector-checkbox" id="company-04">
      <input type="checkbox" class="selector-checkbox" id="company-05">
      <input type="checkbox" class="selector-checkbox" id="company-06">

    </div>

    <div class="comparison-table">
      <div class="row row-flex">
        <div class="col-sm-3 company company-01">
          <div class="table-item table-header feature-box">
            <h2>Company 01</h2>
          </div>
          <div class="table-item feature-box">
            <p>Feature 01</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 02</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 03</p>
          </div>
        </div>
        <div class="col-sm-3 company company-02">
          <div class="table-item table-header feature-box">
            <h2>Company 02</h2>
          </div>
          <div class="table-item feature-box">
            <p>Feature 01</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 02</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 03</p>
          </div>
        </div>
        <div class="col-sm-3 company company-03">
          <div class="table-item table-header feature-box">
            <h2>Company 03</h2>
          </div>
          <div class="table-item feature-box">
            <p>Feature 01</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 02</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 03</p>
          </div>
        </div>
        <div class="col-sm-3 company company-04">
          <div class="table-item table-header feature-box">
            <h2>Company 04</h2>
          </div>
          <div class="table-item feature-box">
            <p>Feature 01</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 02</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 03</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>




<div class="footer">
  <div class="wrapper">
    <div class="row">
      <div class="col-sm-3">
        <h3>Title</h3>
        <ul>
          <li><a href="">Item 01</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>
0 голосов
/ 19 марта 2020

Просто установите начальное состояние ввода и массив на 1,2,3 компании. 

var array = ['company-01','company-02','company-03'];
$(".selector-checkbox").change(function() {
  if ($(this).is(":checked")) {
    array.push(this.id);
    if (array.length > 3) {
      //Getting the deleted item id
      let deleteId = array.splice(0, 1)[0];
      //removing checked and active class
      $("#"+deleteId).prop("checked", false);
      $("."+deleteId).toggleClass('active', false);
    }
  } else {
    var index = array.indexOf(this.id);
    array.splice(index, 1);
  }
});

$('.selector-checkbox').click(function() {
  let id = this.id; 
  $('.'+id).toggleClass('active', this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-content">
  <div class="wrapper">

    <div class="comparison-selector">
      <input type="checkbox" class="selector-checkbox" id="company-01" checked>
      <input type="checkbox" class="selector-checkbox" id="company-02" checked>
      <input type="checkbox" class="selector-checkbox" id="company-03" checked>
      <input type="checkbox" class="selector-checkbox" id="company-04">
      <input type="checkbox" class="selector-checkbox" id="company-05">
      <input type="checkbox" class="selector-checkbox" id="company-06">

    </div>

    <div class="comparison-table">
      <div class="row row-flex">
        <div class="col-sm-3">
          <div class="table-item table-header feature-box">

          </div>
          <div class="table-item feature-box">
            <p>Feature 01</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 02</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 03</p>
          </div>
        </div>

        <div class="col-sm-3 company-01">
          <div class="table-item table-header feature-box">
            <h2>Company 01</h2>
          </div>
          <div class="table-item feature-box">
            <p>Feature 01</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 02</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 03</p>
          </div>
        </div>
        <div class="col-sm-3 company-02">
          <div class="table-item table-header feature-box">
            <h2>Company 02</h2>
          </div>
          <div class="table-item feature-box">
            <p>Feature 01</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 02</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 03</p>
          </div>
        </div>
        <div class="col-sm-3 company-03">
          <div class="table-item table-header feature-box">
            <h2>Company 03</h2>
          </div>
          <div class="table-item feature-box">
            <p>Feature 01</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 02</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 03</p>
          </div>
        </div>
        <div class="col-sm-3 company-04">
          <div class="table-item table-header feature-box">
            <h2>Company 03</h2>
          </div>
          <div class="table-item feature-box">
            <p>Feature 01</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 02</p>
          </div>
          <div class="table-item feature-box">
            <p>Feature 03</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>




<div class="footer">
  <div class="wrapper">
    <div class="row">
      <div class="col-sm-3">
        <h3>Title</h3>
        <ul>
          <li><a href="">Item 01</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

ОБНОВЛЕНИЕ: Не задан вопрос полностью, добавлен код для удаления класса .active, когда выбрано более 3 элементов. 

if (array.length > 3) {
  //Getting the deleted item id
  let deleteId = array.splice(0, 1)[0];
  //removing checked and active class
  $("#"+deleteId).prop("checked", false);
  $("."+deleteId).toggleClass('active', false);
}

ОБНОВЛЕНИЕ2: Optimezed js для обработки флажка щелкните и измените

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...