Число больше 9 начинается сверху и остается там

Question

Число больше 9 начинается сверху и остается там

1

Этот фрагмент кода был написан @frank-wisniewski :]

    Array.from(document.querySelectorAll('[id^="switch-wrapper-"] input[type=checkbox]')).forEach(function(elem){
    elem.onchange=function(){
        this.parentNode.querySelector('p').innerHTML = (this.checked) ? 'Not Visible' : "Visible";
        //when you have more than 9 cards take the number with a regex..
        var newSel = '#card-'+ this.id[6];
        document.querySelector(newSel).classList.toggle('card-disabled');
    }
});
Array.from(document.querySelectorAll('[id^="switch-wrapper-"] input[type=checkbox]')).forEach(function(elem){
    elem.parentNode.querySelector('p').innerHTML = (elem.checked) ? 'Not Visible' : "Visible";
    if (elem.checked)document.querySelector('#card-'+ elem.id[6]).classList.add("card-disabled");
});

https://jsfiddle.net/e5brLhyy/3/

Проблема, с которой я столкнулся сейчас, заключается в том, что если более 9 карт (и переключателей) работают неправильно, 10+ переключатели больше не запускают карту. Вместо этого он только запускает первую карту.

Я знаю, что задано много вопросов о чем-то "более 9", но я не понимаю, как это исправить

Кто-нибудь знает ответ? Посмотрите на скрипку, если хотите.

joostdelange 31 май 2017, в 16:34

Источник

Теги:

javascript

2 ответа

1

Оформить скрипку

Вы выбираете var newSel = '#card-'+ this.id[6]; неправильно

У вашего this.id есть строка "input-11" и ваш код this.id[6]; только 6-й символ строки, который равен 1 (input- 1 1) в "input-11", поэтому он отключает первый div.

Что вы можете сделать, так это разделить идентификатор с символом - и получить индекс 1

this.id.split('-')[1];

Метод split() разбивает объект String на массив строк, разделяя строку на подстроки.

Вот фрагмент

Array.from(document.querySelectorAll('[id^="switch-wrapper-"] input[type=checkbox]')).forEach(function(elem) {
  elem.onchange = function() {
    console.log(this.parentNode);
    this.parentNode.querySelector('p').innerHTML = (this.checked) ? 'Disabled' : "Visible";
    
    var newSel = '#card-' + this.id.split('-')[1];
    document.querySelector(newSel).classList.toggle('card-disabled');
  }
});

        /*Variables*/
        
        :root {
          --white: #FFFFFF;
          --black: #000000;
          --grey-200: #EEEEEE;
          --grey-400: #BDBDBD;
          --grey-50: #FAFAFA;
          --black-transparent-800: rgba(0, 0, 0, 0.80);
          --black-transparent-500: rgba(0, 0, 0, 0.54);
          --black-transparent-300: rgba(0, 0, 0, 0.38);
          --black-transparent-100: rgba(0, 0, 0, 0.12);
          --teal-500: #009688;
          --teal-transparent-500: rgba(0, 150, 136, 0.5);
          --teal-transparent-light-500: rgba(0, 150, 136, 0.2);
          --yellow-500: #FFEB3B;
          --teal-700: #00796B;
          --h1: 2.125em;
          --text-title: 1.25em;
          --caption: 0.875em;
          --body: 1em;
          --button-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
          --button-shadow-active: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
          --bubble-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.28), 0 0 0 1.25rem rgba(128, 128, 128, 0.1);
          --shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
          --container-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
          --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .switch-wrapper {
          margin-bottom: 41px;
          margin-left: 5px;
        }
        
        .switch-wrapper p {
          display: inline-block;
          line-height: 1.5rem;
          margin: 0 1.25rem 0;
          vertical-align: middle;
          text-transform: uppercase;
          transition: var(--transition);
        }
        
        .switch-wrapper .switch {
          display: inline-block;
          position: relative;
          width: 2.5rem;
          height: 1rem;
          border-radius: 0.5rem;
          background: rgba(0, 0, 0, 0.26);
          -webkit-transition: var(--transition);
          transition: var(--transition);
          vertical-align: middle;
          cursor: pointer;
        }
        
        .switch-wrapper .switch::before {
          content: '';
          position: absolute;
          top: -0.25rem;
          left: -0.25rem;
          width: 1.5rem;
          height: 1.5rem;
          background: #fafafa;
          box-shadow: var(--shadow);
          border-radius: 50%;
          -webkit-transition: left var(--transition), var(--transition), box-shadow var(--transition);
          transition: left var(--transition), var(--transition), box-shadow var(--transition);
        }
        
        .switch-wrapper .switch:active::before {
          box-shadow: var(--button-shadow-active);
        }
        
        .switch-wrapper input:checked + .switch {
          background: var(--teal-transparent-500);
        }
        
        .switch-wrapper input:checked + .switch::before {
          left: 1.25rem;
          background: var(--teal-500);
        }
        
        .switch-wrapper input:checked + .switch:active::before {
          box-shadow: var(--button-shadow-active);
        }
        
        .card-small-half-wrapper {
          float: left;
          width: auto;
        }
        
        .card-small-half-wrapper .card-small-half {
          width: 290px;
          min-height: 45px;
          margin: 20px 10px 20px 0px;
          display: block;
          box-shadow: var(--shadow);
          border-radius: 2px;
          transition: var(--transition);
        }
        
        .card-small-half-wrapper .card-small-half:first-child {
          margin-top: 10px;
        }
        
        .card-small-half-wrapper .card-small-half .action-bar {
          height: 45px;
          display: flex;
          align-items: center;
          padding: 0px 10px;
        }
        
        .card-small-half-wrapper .card-small-half .action-bar a {
          display: inline-block;
          align-items: center;
          text-align: right;
        }
        
        .card-small-half-wrapper .card-small-half .action-bar p {
          margin: 0 10px;
          font-size: var(--body);
          text-transform: uppercase;
          width: 100%;
        }
        
        .card-small-half-wrapper .card-small-half .action-bar .material-icons {
          margin: 0 10px;
          padding: 4px 0;
        }
        
        .options-card {
          float: left;
          width: 250px;
          height: auto;
          padding: 11px 20px;
          box-shadow: var(--shadow);
          margin: 10px 0px 10px 10px;
          min-height: 446px;
          border-radius: 2px;
        }
        
        .card-disabled {
          opacity: 0.3;
          pointer-events: none;
        }
        
        .display-none {
          display: none;
        }
        
        .material-icons {
          opacity: 0.54;
        }

<div class="card-small-half-wrapper">
  <div class="card-small-half" id="card-1">
    <a href="components/">
      <div class="action-bar">
        <p>Add Page</p>
        <i class="material-icons">add</i>
      </div>
    </a>
  </div>
  <div class="card-small-half" id="card-2">
    <a href="components/">
      <div class="action-bar">
        <p>Add Page</p>
        <i class="material-icons">add</i>
      </div>
    </a>
  </div>
  <div class="card-small-half" id="card-3">
    <a href="components/">
      <div class="action-bar">
        <p>Add Page</p>
        <i class="material-icons">add</i>
      </div>
    </a>
  </div>
  <div class="card-small-half" id="card-4">
    <a href="components/">
      <div class="action-bar">
        <p>Add Page</p>
        <i class="material-icons">add</i>
      </div>
    </a>
  </div>
  <div class="card-small-half" id="card-5">
    <a href="components/">
      <div class="action-bar">
        <p>Add Page</p>
        <i class="material-icons">add</i>
      </div>
    </a>
  </div>
  <div class="card-small-half" id="card-6">
    <a href="components/">
      <div class="action-bar">
        <p>Add Page</p>
        <i class="material-icons">add</i>
      </div>
    </a>
  </div>
  <div class="card-small-half" id="card-7">
    <a href="components/">
      <div class="action-bar">
        <p>Add Page</p>
        <i class="material-icons">add</i>
      </div>
    </a>
  </div>
  <div class="card-small-half" id="card-8">
    <a href="components/">
      <div class="action-bar">
        <p>Add Page</p>
        <i class="material-icons">add</i>
      </div>
    </a>
  </div>
  <div class="card-small-half" id="card-9">
    <a href="components/">
      <div class="action-bar">
        <p>Add Page</p>
        <i class="material-icons">add</i>
      </div>
    </a>
  </div>
  <div class="card-small-half" id="card-10">
    <a href="components/">
      <div class="action-bar">
        <p>Add Page</p>
        <i class="material-icons">add</i>
      </div>
    </a>
  </div>
  <div class="card-small-half" id="card-11">
    <a href="components/">
      <div class="action-bar">
        <p>Add Page</p>
        <i class="material-icons">add</i>
      </div>
    </a>
  </div>
  <div class="card-small-half" id="card-12">
    <a href="components/">
      <div class="action-bar">
        <p>Add Page</p>
        <i class="material-icons">add</i>
      </div>
    </a>
  </div>
</div>
<div class="options-card">
  <div class="switch-wrapper" id="switch-wrapper-1">
    <input type="checkbox" id="input-1" class="display-none">
    <label class="switch" for="input-1"></label>
    <p>Visible</p>
  </div>
  <div class="switch-wrapper" id="switch-wrapper-2">
    <input type="checkbox" id="input-2" class="display-none">
    <label class="switch" for="input-2"></label>
    <p>Visible</p>
  </div>
  <div class="switch-wrapper" id="switch-wrapper-3">
    <input type="checkbox" id="input-3" class="display-none">
    <label class="switch" for="input-3"></label>
    <p>Visible</p>
  </div>
  <div class="switch-wrapper" id="switch-wrapper-4">
    <input type="checkbox" id="input-4" class="display-none">
    <label class="switch" for="input-4"></label>
    <p>Visible</p>
  </div>
  <div class="switch-wrapper" id="switch-wrapper-5">
    <input type="checkbox" id="input-5" class="display-none">
    <label class="switch" for="input-5"></label>
    <p>Visible</p>
  </div>
  <div class="switch-wrapper" id="switch-wrapper-6">
    <input type="checkbox" id="input-6" class="display-none">
    <label class="switch" for="input-6"></label>
    <p>Visible</p>
  </div>
  <div class="switch-wrapper" id="switch-wrapper-7">
    <input type="checkbox" id="input-7" class="display-none">
    <label class="switch" for="input-7"></label>
    <p>Visible</p>
  </div>
  <div class="switch-wrapper" id="switch-wrapper-8">
    <input type="checkbox" id="input-8" class="display-none">
    <label class="switch" for="input-8"></label>
    <p>Visible</p>
  </div>
  <div class="switch-wrapper" id="switch-wrapper-9">
    <input type="checkbox" id="input-9" class="display-none">
    <label class="switch" for="input-9"></label>
    <p>Visible</p>
  </div>
  <div class="switch-wrapper" id="switch-wrapper-10">
    <input type="checkbox" id="input-10" class="display-none">
    <label class="switch" for="input-10"></label>
    <p>Visible</p>
  </div>
  <div class="switch-wrapper" id="switch-wrapper-11">
    <input type="checkbox" id="input-11" class="display-none">
    <label class="switch" for="input-11"></label>
    <p>Visible</p>
  </div>
  <div class="switch-wrapper" id="switch-wrapper-12">
    <input type="checkbox" id="input-12" class="display-none">
    <label class="switch" for="input-12"></label>
    <p>Visible</p>
  </div>
</div>

Nadir Laskar 31 май 2017, в 11:15

0

Спасибо за ваш ответ, особенно за четкое объяснение, я понимаю, что случилось сейчас!
joostdelange 31 май 2017, в 14:23
0

@joostdelange Иди за голосованием, если оно тебе помогло :)
Nadir Laskar 31 май 2017, в 14:46

Ещё вопросы

Спасибо за ваш ответ, особенно за четкое объяснение, я понимаю, что случилось сейчас!
@joostdelange Иди за голосованием, если оно тебе помогло :)

Frank Wisniewski · Accepted Answer · 2017-05-31T11-44-00.000Z

Попробуй это:

играть на скрипке

var newSel = '#card-'+ this.id.split('-')[1];

он также работает под краем...

Не могу понять, как вы все реагируете с хорошими ответами каждый раз!
По какой причине вы написали это по-другому в первый раз?
потому что у вас есть только 9 карт,
Хорошо! Возможно, мне нужно было упомянуть ранее, что количество карт неизвестно;)