0xD34F

Попробуйте заменить

'.catalog__scrollbarLine'

на

$(this).find('.catalog__scrollbarLine')

или

$(this).find('.catalog__scrollbarLine')[0]

Если вы внутри функции определяете переменную с таким же именем, как и у переменной из внешней области видимости, то последняя окажется недоступной. Строка 57 - уберите ключевое слово var.

setTimeout(show(i), i * 300);

Вместо того, чтобы передать в setTimeout функцию, вы её вызываете.

Какие есть варианты исправить косяк:

1. Оберните вызов своей функции в другую функцию, которая будет передана в setTimeout:
   
   setTimeout(() => show(i), i * 300);
   
   
2. Выполните привязку параметра:
   
   setTimeout(show.bind(null, i), i * 300);
   
   
3. Передавайте свою функцию в setTimeout, а параметры, с которыми она должны быть вызвана, укажите отдельно:
   
   setTimeout(show, i * 300, i);
   
   
4. Перепишите свою функцию так, чтобы она возвращала другую функцию:
   
   

   function show(x) {
     return function() {
       // сюда помещаете то, что находится у вас в show сейчас
     };
   }

   
   

Не работающая часть
class NewsLoader {

https://caniuse.com/#feat=es6-class

О каких элементах идёт речь:

const ancestorSelector = 'селектор_предка';
const descendantSelector = `${ancestorSelector} селектор_потомка`;

Если цеплять обработчик клика непосредственно на потомков - от элемента, на котором висит обработчик, поднимаемся к предку и удаляем его:

document.querySelectorAll(descendantSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => e.currentTarget.closest(ancestorSelector).replaceWith());

Если применять делегирование - пробуем подняться от целевого элемента к потомку, если таковой нашёлся, поднимаемся к предку и удаляем его:

document.addEventListener('click', e => {
  const descendant = e.target.closest(descendantSelector);
  if (descendant) {
    descendant.closest(ancestorSelector).outerHTML = '';
  }
});

// или

document.addEventListener('click', ({ target: t }) =>
  (t = t.closest(descendantSelector)) && t.closest(ancestorSelector).remove()
);

UPD. Наконец-то дождались, теперь сокращённой версии делегированного обработчика можно придать более пристойный вид:

document.addEventListener('click', e => {
  e.target.closest(descendantSelector)?.closest(ancestorSelector).remove();
});

h1::before {
  content: "";
  background-image: url(http://via.placeholder.com/50x50);
  display: inline-block;
  width: 50px;
  height: 50px;
}

UPD. Вынесено из комментариев:

Если увеличивать width или height, то картинка повторяется.
Как можно отключить повтор?

Можно картинку растянуть:

background-size: cover;

А можно не изменяя размера разместить по центру, например:

background-position: center;
background-repeat: no-repeat;

Объект-то в строку надо превратить.

Добавляете

import ReactDOMServer from 'react-dom/server';

в начало вашего index.js, затем

textField.innerText = IconsList.internet;

меняете на

textField.innerText = ReactDOMServer.renderToStaticMarkup(IconsList.internet);

<span id="typed"></span>
<div id="actions">
  <button data-action="start">play</button>
  <button data-action="stop">pause</button>
</div>

const typed = new Typed('#typed', {
  typeSpeed: 100,
  loop: true,
  strings: [
    'hello, world!!',
    'fuck the world',
    'fuck everything',
  ],
});

document.querySelector('#actions').addEventListener('click', e => {
  const { action } = e.target.dataset;
  if (action) {
    typed[action]();
  }
});

Ну как бы так:

const cloud = new Image();
cloud.src = 'https://avatanplus.com/files/resources/mid/56dc1ba4ba1b81534bcbfb9a.png';

(function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');

  ctx.globalCompositeOperation = 'destination-over';
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = 'rgba(0,0,0,0.4)';
  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
  ctx.save();
  ctx.translate(300, 200);

  const time = new Date();
  ctx.rotate(Math.sin(time / 500) / 10);

  ctx.drawImage(cloud, -300, -200);
  ctx.restore();

  window.requestAnimationFrame(draw);
})();

Коэффициенты для изменения скорости и амплитуды - их вы, думаю, сможете подобрать самостоятельно.

100 * arr.reduce((sum, n) => sum + +n.no_apply, 0) / arr.reduce((sum, n) => sum + +n.count, 0)

locales: ['ru', 'en'],
locale: 'ru',

{{ locales[locale]}}

v-for="(value, key) in locales"

@click.prevent="localizee(key)"

Ничего не смущает? Есть массив языков, есть текущий язык. А работаете вы с текущим языком не как с языком, а как с его индексом - и при выводе в шаблон, и при установке языка. Что это за шизофрения?

Проблема не localStorage, а в том, что вы не до конца понимаете, как работает метод index. Если вызывать его без аргументов, то будет возвращён индекс элемента относительно его соседей. А вовсе не на странице в целом, как вам сейчас кажется.

Какие есть варианты решения вашей проблемы:

• Собирать индексы на всех уровнях вложенности, вместо одного числа будете хранить массив
  
• Вместо индексов использовать id (лично мне это видится наиболее предпочтительным вариантом - при изменении структуры меню информация о выбранном пункте останется корректной)
  
• Ну и наконец, самый лёгкий и простой способ - воспользоваться методом index соответственно вашей задумке, замените $(this).index() на $('.sub3').index(this) (за подробностями - в документацию)
  

<tr *ngFor="let monitoring of filteredMonitorings ">
    <td style="text-align: center">{{ getTotal(filteredMonitorings) }} </td>
</tr>

Здесь вы обходите массив, и на каждом шаге суммируете все его элементы. Конечно, результаты будут одинаковыми.

Если надо выводить отдельные элементы, то вместо общей суммы надо показывать значение из текущего объекта:

<tr *ngFor="let monitoring of filteredMonitorings ">
  <td style="text-align: center">{{ monitoring.count }} </td>
</tr>

Если надо вывести сумму - избавьтесь от ngFor:

<tr>
  <td style="text-align: center">{{ getTotal(filteredMonitorings) }} </td>
</tr>

Во-первых - обходите не те блоки. Вместо .counter-block (он же у вас всего один) должно быть .product-count.

Во-вторых - работая с конкретным блоком, вместо поиска элементов только внутри него, вы обшариваете всю страницу.

А почему бы не сделать массив доступных языков:

languages: [ 'en', 'ru' ]

И не обойти его с помощью v-for:

<ul>
  <li
    v-for="lang in languages"
    @click="selected = lang"
  >
    {{ lang }}
  </li>
</ul>

??

Сначала загружаете данные пользователя, а затем инициализируете приложение:

store.dispatch('заргузитьДанныеПользователя').then(() => {
  new Vue({ ... });
});

Или, в компоненте:

created() {
  this.$store.dispatch('заргузитьДанныеПользователя');
},

<div v-if="$store.state.данныеПользователя">
  контент
</div>
<индикатор-загрузки v-else />

Можно ли сохранять состояние одного компонента с разными входными данными

Честно говоря, совсем не понимаю, в чём тут проблема. Если входные данные - это id пользователя, с которым ведётся переписка, то почему бы не допустить хранение переписки сразу с несколькими пользователями: объект, ключи которого - id пользователей, значения - соответствующие сообщения. Делать watch на активного пользователя - при изменении проверять, если такого в объекте ещё нет, запрашивать его сообщения (код из created вынести в отдельный метод, чтобы можно было использовать и в created и в watcher'е).

Элементы с float не влияют на высоту родительского элемента, а других внутри у .div_info у вас нет - так что его высота равна нулю. А поскольку сам .div_info является единственным дочерним элементом .midd_wrap - то и последний также имеет нулевую высоту. Т.е., бэкграунд на самом деле есть, просто вы его не видите.

Документацию-то открывать пробовали? Там пишут, что будто бы для задания новой конечной даты достаточно просто выполнить инициализацию ещё раз. Соответственно, внутрь if (event.elapsed) {} вставляете $(this).countdown(а здесь новая дата);.

Ну, поскольку стили вы назначаете с помощью метода css, они попадают в атрибут style. А значит - достаточно просто получить его значение, типа так. Или, можно не переприсваивать объект со стилями, а дополнять его - тогда можно воспользоваться JSON.stringify, типа так.