Форум

kristow · #1 (**permalink**) 26.02.2015, 11:37

Всем привет!
У меня страница с большим количеством кнопок, они отрывают модальные окна с формами для редактирования параметров.
У меня на компе работает открывание модальных окон моментально. А на компе послабее после клика от 5 до 30 сек.
Я думаю что наверное все дело в слишком большом скрипте...
Прошу помощи для его оптимизации.
Модальные div -ы генерирует php код. Сейчас и часть javascript кода генерирует php.

Вот сам код:

<script type="text/javascript">
	$(document).ready(function() {
		$(document).on('click', '.modal_btn', function(){
			$('#small-modal').arcticmodal();
		});
		$(document).on('click', '.modal_btn2', function(){ $('#small-modal2').arcticmodal(); });
		$(document).on('click', '.modal_btn-new', function(){ $('#small-modal-new').arcticmodal(); });
		$(document).on('click', '.modal_btn-del', function(){ $('#small-modal-del').arcticmodal(); });
		$(document).on('click', '.modal_btn-reset', function(){ window.location.reload() });
		
		$(document).on('click', '.modal_btn-10-1', function(){ $('#small-modal-10-1').arcticmodal(); });
		$(document).on('click', '.modal_btn-10-2', function(){ $('#small-modal-10-2').arcticmodal(); });
		$(document).on('click', '.modal_btn-10-3', function(){ $('#small-modal-10-3').arcticmodal(); });
		$(document).on('click', '.modal_btn-10-4', function(){ $('#small-modal-10-4').arcticmodal(); });
		$(document).on('click', '.modal_btn-14-1', function(){ $('#small-modal-14-1').arcticmodal(); });
		$(document).on('click', '.modal_btn-14-2', function(){ $('#small-modal-14-2').arcticmodal(); });
далее еще две сотни подобного...	
		
	});
    </script>

modal_btn-XX-YY - это имя кнопки
#small-modal-XX-YY - это имя модального окна.
XX-YY сочетание в имени кнопки и модального окна одинаковые.
Подскажите как переделать код для более быстрой работы.

ksa · #2 (**permalink**) 26.02.2015, 11:48

Сообщение от kristow

как переделать код для более быстрой работы.

Вот так можно уменьшить код...

<!DOCTYPE html>
<html>
<head>
<script src='http://code.jquery.com/jquery-latest.js'></script>
<!--
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
<link rel='stylesheet type=text/css href=tmp.css' />
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
$(function(){
	var a=[
		{one: '.thumbnail0', two: '.thumbnail0'},
		{one: '.thumbnail1', two: '.thumbnail1'},
		{one: '.thumbnail2', two: '.thumbnail2'}
	];
	for (var i=0; i<a.length; i++) {
		$(document).on('click', a[i].one, (function (Selector){
			return function(){ 
				alert($(Selector).attr('href')); 
				return false;
			};
		})(a[i].two))
	};
});
</script>
</head>
<body>
<div class="thumbnails">
	<a class="thumbnail0" href="/link0">
		<img alt="Партнеры" src="/images/nd/part.gif">
	</a>
	<a class="thumbnail1" href="/link1">
		<img alt="Партнеры" src="/images/nd/part.gif">
	</a>
	<a class="thumbnail2" href="/link2">
		<img alt="Партнеры" src="/images/nd/part.gif">
	</a>
</div>
</body>
</html>

ksa · #3 (**permalink**) 26.02.2015, 11:51

Сообщение от kristow

как переделать код для более быстрой работы

Если какие-то селекторы можно вычислять, зная их количество - будет еще меньше кода...

рони · #4 (**permalink**) 26.02.2015, 12:19

kristow,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  span{
    cursor: pointer;
  }

   </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       $(document).on('click', '[class*="modal_btn"]', function(){
		   var id = '#small-modal'+this.className.replace(/^.*modal_btn([^\s]+).*?$/, '$1')
           alert(id)
           //$(id).arcticmodal();
		});
});


  </script>
</head>

<body>
<span class="modal_btn-01 test">-01</span>
<span class="red modal_btnnew">new</span>
<span class="modal_btn03">03</span>
<span class="modal_btn04">04</span>
<span class="modal_btn05">05</span>
<span class="modal_btn06">06</span>
<span class="modal_btn07">07</span>
<span class="modal_btn08">08</span>
<span class="modal_btn09">09</span>
<span class="modal_btn10">10</span>

</body>

</html>

kristow · #5 (**permalink**) 26.02.2015, 13:02

РОНИ спасибо!
твой код-вариант мне понравился больше всего

попробовал внедрить, все работает! Спасибо.

Форум

Справочник

Discord чат

Курсы javascript