Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Грамотное написание кода (https://javascript.ru/forum/misc/56430-gramotnoe-napisanie-koda.html)

blacklool 15.06.2015 23:42

Грамотное написание кода
 
Здравствуйте,

не первый день пишу на js, и вот хочу знать как правильно писать js код (а именно jquery) когда на сайте встроена подгрудка страниц и контента через POST и нужно прописывать клики по классам.

Вот пример, есть меню что обновляется пост запросами, но не полностью а частями, мне нужно по классам прописать евенты (клик),

вот мне говорили что нужно прописывать ид и по ним ставить клики, другие по классам, третье прописывать onclick....

как правильно прописывать эти евенты чтобы не было несколько "вызовов" при одном клике, да и вообще как это лучше всего делать?

пример был очень банальный, в реале все намного сложнее, но я хочу понять принцип, так что давайте простые примеры кода, или возможно статьи (просто не знаю как искать это, если есть конкретное наименование, пожалуйста поделитесь :) ) :write:

спасибо!

caetus 16.06.2015 01:52

я б делал как-то так !
Если у тебя например элементы которые вызывают события не в одном родительском блоке тогда вешай по классам !
<div id="div">
<p data-id="id1"></p>
<p data-id="id2"></p>
<p data-id="id3"></p>
</div>
<script>

$('#div').click(function (e) {
	var data = e.target.getAttribute('data-id');
	if(!data) return;
	alert(data) //$.get("index.php", data, myCallback,"json");
});
</script>

blacklool 18.06.2015 02:54

Цитата:

Сообщение от caetus (Сообщение 375203)
я б делал как-то так !
Если у тебя например элементы которые вызывают события не в одном родительском блоке тогда вешай по классам !
<div id="div">
<p data-id="id1"></p>
<p data-id="id2"></p>
<p data-id="id3"></p>
</div>
<script>

$('#div').click(function (e) {
	var data = e.target.getAttribute('data-id');
	if(!data) return;
	alert(data) //$.get("index.php", data, myCallback,"json");
});
</script>

Привет!

интересно :)
такой вариант возможно доработать, и будет все именно так как мне нужно!

спасибо! :thanks: :write:

Deff 18.06.2015 03:07

blacklool,
Наверно стоит уникальные ID ставить самим секциям подгрузки, тогда внутри можно разбивать по тем же классам или ID для схожих элементов по стилю, дабы не увеличивать лишних сущностей.
Тогда стиль будет примерно один для схожих секций перечислению селекторов с добавкой селектора секций подгрузки
типа:
#sect1 a, #sect2 a,#sect3 a {
Или
#sect1 .meny2, #sect2 .meny2,#sect3 .meny2{

blacklool 18.06.2015 11:58

Цитата:

Сообщение от Deff (Сообщение 375554)
blacklool,
Наверно стоит уникальные ID ставить самим секциям подгрузки, тогда внутри можно разбивать по тем же классам или ID для схожих элементов по стилю, дабы не увеличивать лишних сущностей.
Тогда стиль будет примерно один для схожих секций перечислению селекторов с добавкой селектора секций подгрузки
типа:
#sect1 a, #sect2 a,#sect3 a {
Или
#sect1 .meny2, #sect2 .meny2,#sect3 .meny2{

Привет, да в принципе можно делать и так :)

я вот до сих пор как то так добавлял евенты после каждой подгрудки, просто вызывал функцию

$('a:not(.worked)')
	.addClass('worked')
	.click(function(e){
		if ($(this).hasClass('worked')) {
			e.preventDefault()
			content_load(this.href)
		}
	})

tsigel 18.06.2015 12:39

blacklool,
Поробуйте с помощью делегирования:
$(document).on('click', 'a.to-load', function(e){
	e.preventDefault()
	content_load(this.href)
});

Создает один обоаботчик на документе и будет слушать клик по 'a.to-load', в не зависимости от того когда он появился в DOM.
https://learn.javascript.ru/event-delegation

blacklool 18.06.2015 13:11

Цитата:

Сообщение от tsigel (Сообщение 375588)
blacklool,
Поробуйте с помощью делегирования:
$(document).on('click', 'a.to-load', function(e){
	e.preventDefault()
	content_load(this.href)
});

Создает один обоаботчик на документе и будет слушать клик по 'a.to-load', в не зависимости от того когда он появился в DOM.
https://learn.javascript.ru/event-delegation

ооо так еще лучше!
прочитал статью, разобрался, теперь не забуду :)
спасибо! :thanks:

tsigel 18.06.2015 13:43

Там вообще много полезного. Полазийте там.
https://learn.javascript.ru/animation
https://learn.javascript.ru/drag-and-drop


Часовой пояс GMT +3, время: 10:03.