Здравствуйте. Имеется внешний скрипт
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>
