1

Есть каталог моделей с возможностью выбора каждой модели кнопкой, при нажатии на кнопку в массив добавляется имя модели (div с именем находится в одном блоке с кнопкой), при повторном нажатии на кнопку имя должно удалиться из массива, подскажите как это сделать? Имена могут повторяться. На данный момент, получается только добавлять имена моделей в массив:

jQuery(function() {
  var models = [];
  $('.mc-block .mc-change-button').on('click', function () {
    $(this).toggleClass('checked');
    if (!$(this).hasClass('checked')) {
      $(this).html('Выбрать модель');
      models.splice(models.indexOf($(this).parent().find('.model-name').html()), 1);
      alert(models);
    } else {
      $(this).html('Модель выбрана');
      models.push($(this).parent().find('.model-name').html());
      alert(models);

    }
  });
});
.mc-block {
  padding: 10px 10px;
  border: solid 1px #000;
}
.mc-change-button.checked {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mc-block">
  <div class="model-name">
    Александра 01
  </div>
  <a class="mc-change-button">Выбрать модель</a>
</div>
<div class="mc-block">
  <div class="model-name">
    Александра 01
  </div>
  <a class="mc-change-button">Выбрать модель</a>
</div>
<div class="mc-block">
  <div class="model-name">
    Александра 01
  </div>
  <a class="mc-change-button">Выбрать модель</a>
</div>
<div class="mc-block">
  <div class="model-name">
    Александра 05
  </div>
  <a class="mc-change-button">Выбрать модель</a>
</div>
<div class="mc-block">
  <div class="model-name">
    Александра 04
  </div>
  <a class="mc-change-button">Выбрать модель</a>
</div>
<div class="mc-block">
  <div class="model-name">
    Александра 02
  </div>
  <a class="mc-change-button">Выбрать модель</a>
</div>

JSFiddle https://jsfiddle.net/6k0k4f0y/

12
  • ищешь в массиве индекс нужного элемента, и используешь splice
    – Grundy
    Commented 18 янв. 2017 в 13:55
  • @Grundy Если допустим имена повторяются то как искать? Commented 18 янв. 2017 в 13:56
  • А что у тебя в массиве хранится? если просто имена, то какая разница какое из одинаковых имен удалять?
    – Grundy
    Commented 18 янв. 2017 в 13:58
  • @Grundy Логично. Ну а все-же, чтобы удалить именно имя модели на кнопку которой нажали, нужно в массив добавлять объект? Commented 18 янв. 2017 в 14:00
  • Это выглядит логично :-) но не видя что у тебя за объекты и минимального примера рабочего кода сейчас сложно сказать как лучше сделать. Добавь в вопрос сниппет чтобы его можно было запустить и представить как это сейчас происходит
    – Grundy
    Commented 18 янв. 2017 в 14:01

1 ответ 1

1

Предлагаю вот такое странное решение, которое основано на создании цикла, который будет проверять все значения массива

jQuery(function() {
  var models = [];
  $('.mc-block .mc-change-button').on('click', function() {
    $(this).toggleClass('checked');
    if (!$(this).hasClass('checked')) {
      $(this).html('Выбрать модель');
      //----------//
      for (var i = models.length - 1; i >= 0; i--) {
        if (models[i] == $(this).parent().find('.model-name').text()) {
          models.splice(i, 1);
          break
        };
      };
      //----------//
    } else {
      $(this).html('Модель выбрана');
      models.push($(this).parent().find('.model-name').text());

    }
    alert(models);
  });
});
.mc-block {
  padding: 10px 10px;
  border: solid 1px #000;
}
.mc-change-button.checked {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mc-block">
  <div class="model-name">
    Александра 01
  </div>
  <a class="mc-change-button">Выбрать модель</a>
</div>
<div class="mc-block">
  <div class="model-name">
    Александра 01
  </div>
  <a class="mc-change-button">Выбрать модель</a>
</div>
<div class="mc-block">
  <div class="model-name">
    Александра 01
  </div>
  <a class="mc-change-button">Выбрать модель</a>
</div>
<div class="mc-block">
  <div class="model-name">
    Александра 01
  </div>
  <a class="mc-change-button">Выбрать модель</a>
</div>
<div class="mc-block">
  <div class="model-name">
    Александра 01
  </div>
  <a class="mc-change-button">Выбрать модель</a>
</div>
<div class="mc-block">
  <div class="model-name">
    Александра 01
  </div>
  <a class="mc-change-button">Выбрать модель</a>
</div>

5
  • Простите, что это за жесть с флагом del? w3schools.com/jsref/jsref_break.asp
    – user176262
    Commented 18 янв. 2017 в 14:36
  • А в чем отличие от простого удаления? Предварительная поверка? Commented 18 янв. 2017 в 14:36
  • @ВячеславЯшников, да
    – Yuri
    Commented 18 янв. 2017 в 14:37
  • @Igor, боже! Как стыдно. Совсем позабыл об этом ._.
    – Yuri
    Commented 18 янв. 2017 в 14:38
  • А чем этот код отличается от того, что в вопросе, за исключением того, что тут цикл вместо IndexOf?
    – Grundy
    Commented 18 янв. 2017 в 15:12

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.