0xD34F

Вместо .label-text переключайте класс у максимально дальних не общих предков input'ов, т.е., у .thumb. Соответственно, стилизовать надо будет не .label-text.класс, а .класс .label-text. Зачем делать именно так? Потому что не придётся переписывать js-код, если вдруг вам завтра захочется кроме .label-text стилизовать ещё что-то, или решите изменить взаимное расположение элементов.

Где input'ы находятся, что за input'ы, какой класс надо переключать:

const containerSelector = '.thumb';
const inputSelector = 'input[id^="input-"]';
const activeClass = 'active';

Переключать класс можете по-прежнему с помощью jquery:

$(containerSelector).on('input', inputSelector, function(e) {
  $(e.delegateTarget).toggleClass(activeClass, !!this.value);
});

А можете начать осваивать чистый js:

const onInput = ({ target: t, currentTarget: ct }) =>
  t.matches(inputSelector) && ct.classList.toggle(activeClass, !!t.value);

document.querySelectorAll(containerSelector).forEach(n => {
  n.addEventListener('input', onInput);
});

А что это у вас там за цикл?.. Нет, не желаю этого знать. Делайте так: номер игрока равен номеру текущей карточки, а если игроки закончились, то берёте случайное значение. Т.е., заменяете

for (let j = 1; j <= this.players; j++) { 
  this.card.dataset.playerId = j; // а тут устанавливаем playerId. Но он у меня постоянно одинаковый
}

на что-то вроде

this.card.dataset.playerId = i <= this.players ? i : ((Math.random() * this.players | 0) + 1);

Можно повесить обработчик click на корневой элемент: если целевым элементом является ссылка - отменяете действие по умолчанию и открываете новое окно вручную:

<div id="app" @click="onClick">
  ...

new Vue({
  el: '#app',
  methods: {
    onClick(e) {
      if (e.target.tagName === 'A') {
        e.preventDefault();
        window.open(e.target.getAttribute('href'));
      }
    },
    ...
  },
  ...
});

const className = 'здесь должен быть класс ваших input\'ов';

Получаем элементы:

const inputs = document.querySelectorAll(`.${className}`);

// или

const inputs = document.getElementsByClassName(className);

Собираем массив значений:

const values = Array.from(inputs, n => n.value);

// или

const values = Array.prototype.map.call(inputs, n => n.value);

// или

const values = [];
for (const n of inputs) {
  values.push(n.value);
}

// или

const values = [];
for (let i = 0; i < inputs.length; i++) {
  values[i] = inputs[i].value;
}

// или

const values = (function get(i, n = inputs.item(i)) {
  return n ? [ n.value, ...get(i + 1) ] : [];
})(0);

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

next transaction (subscription) cannot start until the previous completes

Хотите, чтобы было "независимо" - используйте merge вместо concat.

Замените $('.cart-window ul').each на $('.cart-window ul .item').each, а $(this).find('.item span').text() замените на $(this).find('span').text().

А то сейчас вместо того, чтобы перебирать .item'ы, вы обрабатываете сразу весь список, разом получая содержимое всех .item span'ов - естественно, строки склеиваются.

str.replace(/\s+/g, '-')

Второй параметр в range - это количество элементов, а не конечное значение (как вам, по-видимому, показалось).

То есть, в первом случае последовательность такая: 1, 2, 3, 4, 5. А во втором такая: 0, 1, 2, 3, 4. Соответственно, 15 / 5 = 3, 10 / 5 = 2, всё правильно.

Этот код вместо результата выводит undefined.

Под "выводит" вы подразумеваете результат вызова console.log, да? Что ж, ничего ваш код не выводит - console.log не вызывается ни разу, undefined возникает в консоли потому, что последнее, что вы делаете - вызываете метод subscribe, который ничего не возвращает.

Отсутствие вывода обусловлено пустотой массива result, а пуст он потому, что... Нет, не буду объяснять - разберитесь, как стрелочными функциями пользоваться, и найдите свои ошибки сами.

Кого надо обернуть:

const elements = document.querySelectorAll('.news-full-text img');

Оборачиваем:

for (const n of elements) {
  const el = document.createElement('div');
  el.className = 'image';
  el.appendChild(document.createElement('div'));
  el.lastChild.className = 'image-social';
  el.lastChild.textContent = 'социальные кнопки';
  n.insertAdjacentElement('afterend', el);
  el.insertAdjacentElement('afterbegin', n);
}

или

elements.forEach(n => n.outerHTML = `
  <div class="image">
    ${n.outerHTML}
    <div class="image-social">социальные кнопки</div>
  </div>
`);

Как опознать блоки со спойлерами, а также заголовки и контент у них внутри; какой класс надо переключать; как контент должен изменять свою видимость. Ну и сама логика переключения видимости контента - при закрытии спойлеров не надо обрабатывать текущий, т.е., инвертировали состояние кликнутого, взяли все, отбросили кликнутый, закрыли:

const containerSelector = '.spoiler-container';
const headerSelector = '.spoiler-header';
const contentSelector = '.spoiler-content';
const activeClass = 'active';
const toggleEffect = 'slideToggle'; // или fadeToggle, или toggle
const hideEffect = 'slideUp'; // или fadeOut, или hide

function toggle($containers, $container) {
  $containers
    .not($container)
    .removeClass(activeClass)
    .find(contentSelector)
    [hideEffect]();

  $container
    .toggleClass(activeClass)
    .find(contentSelector)
    [toggleEffect]();
}

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

const $containers = $(containerSelector).on('click', headerSelector, e => {
  toggle($containers, $(e.delegateTarget));
});

В случае, если предполагается добавление новых блоков уже после подключения обработчика, то его, обработчик, следует добавить на документ - так всё будет работать как надо без каких-либо дополнительных телодвижений:

$(document).on('click', `${containerSelector} ${headerSelector}`, e => {
  toggle($(containerSelector), $(e.target).closest(containerSelector));
});

Используйте Proxy:

const arr = new Proxy([], {
  get(target, key) {
    const value = target[key];
    return value instanceof Function
      ? (...args) => {
          console.log(`метод "${key}" вызван со следующими аргументами:`, args);
          return value.apply(target, args);
        }
      : value;
  },
  set(target, key, value) {
    console.log(`свойству "${key}" назначено следующее значение:`, value);
    target[key] = value;
    return true;
  },
});

Можно определить собственное свойство value у интересующего вас элемента или переписать сеттер HTMLTextAreaElement.prototype.value - так, чтобы при установке значения генерировалось нужное вам событие.

https://codepen.io/anon/pen/GQywpG?editors=1010

const str = 'qwe//qwe';
const reg = /(qwe\/).*(\/qwe)/;
const replacement = 'hello, world!!';
const newStr = str.replace(reg, `$1${replacement}$2`);

<button>add</button>

document.querySelector('button').addEventListener('click', function() {
  document.body.appendChild(document.createElement('div'));
});

div {
  height: 50px;
  margin: 5px;
  background: red;
  animation: show-div 3s;
}
@keyframes show-div {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

if (cell.textContent === num) {

Дайте-ка угадаю - num, это число, да? Сенсация! Шок! - число не может быть равно строке.

Сравнивайте с приведением типов:

if (cell.textContent == num) {

Или явным образом приводите значения к одному типу:

// строку в число
if (+cell.textContent === num) {

// число в строку
if (cell.textContent === `${num}`) {

document.querySelector('.animate-all').addEventListener('click', e => {
  e.target.hidden = true;

  forEachWithDelay(
    document.querySelectorAll('[data-color]'),
    500,
    el => el.parentNode.style.backgroundColor = el.dataset.color
  );
});

Как может выглядеть функция forEachWithDelay? Такие есть варианты:

• Сразу назначаем таймауты для всех элементов:
  
  

  function forEachWithDelay(arr, delay, callback) {
    Array.prototype.forEach.call(arr, (n, i) => {
      setTimeout(callback, (i + 1) * delay, n);
    });
  }

  
  
• Следующий таймаут назначается в коллбеке предыдущего:
  
  

  function forEachWithDelay(arr, delay, callback) {
    (function next(i) {
      if (i < arr.length) {
        setTimeout(() => {
          callback(arr[i]);
          next(-~i);
        }, delay);
      }
    })(0);
  }

  
  
• Назначаем интервал:
  
  

  function forEachWithDelay(arr, delay, callback) {
    let i = -1;
    const intervalId = setInterval(() => {
      if (++i < arr.length) {
        callback(arr[i]);
      } else {
        clearInterval(intervalId);
      }
    }, delay);
  }

  
  

Как поменять элементу цвет его background'а:

const setBgColor = (el, color) =>
  el.style.backgroundColor = color;
  // или
  el.style.setProperty('background-color', color);
  // или
  el.style.cssText += `background-color: ${color}`;
  // или
  el.setAttribute('style', `background-color: ${color}`);

Меняем:

document.addEventListener('click', ({ target: t }) => {
  const { color } = t.dataset;
  if (color) {
    for (; t.tagName !== 'LI'; t = t.parentNode) ;
    setBgColor(t, color);
  }
});

// или

document.querySelectorAll('[data-color]').forEach(function(n) {
  n.addEventListener('click', this);
}, function() {
  setBgColor(this.closest('li'), this.getAttribute('data-color'));
});

const grouped = Object.values(arr.reduce((acc, { title, value: money }) => {
  (acc[title] = acc[title] || { title, data: [] }).data.push({ money });
  return acc;
}, {}));