@siroper

Как подключить несколько одинаковых скриптов для управления разными селекторами?

Здравствуйте. Имеется внешний скрипт file.js, его содержимое:
function somename(selector) {
	var element = document.querySelector('#'+selector);
	console.log(element );

	window.addEventListener('resize', () => {
		console.log(element );
	});
}


В теле страницы, в разных ее местах мне нужно подключить неограниченное кол-во скриптов. Например

<div id="container_1"></div>
<script src="/file.js" type="text/javascript"></script>
<script type="text/javascript">
	(function (w) {
		w.addEventListener('DOMContentLoaded', () => {
			function start() {
				w.somename("container_1");
			}
			start();
		})
	})(window);
</script>
.....
.....
<div id="container_2"></div>
<script src="/file.js" type="text/javascript"></script>
<script type="text/javascript">
	(function (w) {
		w.addEventListener('DOMContentLoaded', () => {
			function start() {
				w.somename("container_2");
			}
			start();
		})
	})(window);
</script>
...
...
...
<div id="container_3"></div>
<script src="/file.js" type="text/javascript"></script>
<script type="text/javascript">
	(function (w) {
		w.addEventListener('DOMContentLoaded', () => {
			function start() {
				w.somename("container_3");
			}
			start();
		})
	})(window);
</script>


Конструкция именно такая, file.js должен вставляться каждый раз при новом селекторе на странице.

Как заставить file.js обрабатывать в дальнейшем именно тот селектор, который вызван в скрипте следом за ним?

Т.е. при выполнении конструкции выше при загрузке страницы console.log выдаст
<div id="container_1"></div>
<div id="container_2"></div>
<div id="container_3"></div>


Но при рессайзе соответсвенно:
<div id="container_3"></div>
<div id="container_3"></div>
<div id="container_3"></div>
  • Вопрос задан
  • 91 просмотр
Пригласить эксперта
Ответы на вопрос 2
@MikUrrey
Передайте селектор как аргумент в самовызывающуюся функцию:
(function (w, selector) {
    w.addEventListener('DOMContentLoaded', () => {
      function start() {
        w.somename(selector);
      }
      start();
    })
  })(window, "container_N");

Если у вас не фреймы, вам точно не нужно подключать файл несколько раз.
Ответ написан
Aleksandr-JS-Developer
@Aleksandr-JS-Developer
Бери и делай
У вас явно что-то не то с кодом. Лучше всего добавьте этот файл:
// file.js

const listen = selector => {
  let element = document.querySelector( selector );
  console.log( element );
  window.addEventListener( 'resize', e => {

    console.log( element, e );
    // some actions here

  });
}

const selectors = [ // Добавляете сюда нужные селекторы
  '#id',
  '.class',
  '[data-text="any other selector"]'
];

document.addEventListener( 'DOMContentLoaded', () =>
	selectors.forEach( selector => listen( selector ) )
);


В конец, сразу за закрывающим тегом</body>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы