Изменить цвет фишек на флажок изменить материализовать CSS - PullRequest
Новая
       6

Изменить цвет фишек на флажок изменить материализовать CSS

0 голосов
/ 01 мая 2018

Я выполнил поиск в Интернете и не смог найти решение своей проблемы.

Я работаю с материализованными чипами CSS, я хочу, чтобы всякий раз, когда флажок был установлен, цвет последнего чипа должен изменяться на зеленый, а другие на красный, когда не отмечен, они все становятся красными.

Я не знаю, возможно ли это, так как я уже установил свои условия 

$('.chips-placeholder').chips({
    placeholder: 'Enter options',
    secondaryPlaceholder: '+Options',
    limit:6
});

$(document).ready(function() {
    $('#anscheck').change(function() {
        if($("#anscheck").is(":checked")){

        }    
    });
});

HTML 

                   <div class="row opt">
                       <div class="col m4 s10 offset-m3 chips-placeholder">
                           <input type="text" name="opts[]">
                       </div>
                       <div class="col m4 s10 switch correctans">
                        <label>
                          Off
                          <input type="checkbox" id='anscheck'>
                          <span class="lever"></span>
                          On
                        </label>
                       </div>
                   </div>

1 Ответ

0 голосов
/ 01 мая 2018

Редактировать: установить onChipAdd и onChipDelete события для изменения цвета при добавлении или удалении чипа.

Я бы инициализировал компонент чипа без метода jQuery.

1) Получить все фишки.

$(chipInstance[0].$chips)

2) Перебрать все чипы и проверить, равно ли (индекс + 1) чипа количеству всех чипов. (Индекс причины начинается с нуля.) 

allChips.each(function(index, element){
  let Color = (index+1) == allChips.length ? 'green' : 'red';
  $(element).addClass(Color)
})

3) Добавьте класс для изменения цвета шрифта.

Вот демоверсия: 

let target = $('.chips-placeholder');
let options = {
  placeholder: 'Enter options',
  secondaryPlaceholder: '+Options',
  limit: 6,
  onChipAdd: function(){
    CheckChipsColor();
  },
  onChipDelete: function(){
    CheckChipsColor();
  }
}

let chipInstance = M.Chips.init(target, options)

$('#anscheck').change(function() {
  CheckChipsColor();
});

function CheckChipsColor(){
  let allChips = $(chipInstance[0].$chips);
  allChips.removeClass('red green');
  if ($("#anscheck").is(":checked")) {
    allChips.each(function(index, element){
      let Color = (index+1) == allChips.length ? 'green' : 'red';
      $(element).addClass(Color)
    })
  }
}
.red{
  color: red;
}

.green{
  color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.js"></script>

<div class="row opt">
  <div class="col m4 s10 offset-m3 chips-placeholder">
    <input type="text" name="opts[]">
  </div>
  <div class="col m4 s10 switch correctans">
    <label>
    Off
      <input type="checkbox" id='anscheck'>
      <span class="lever"></span>
    On
    </label>
  </div>
</div>
...