Как сократить код?

Question

[Артур]

Приветствую, я поверхностно знаком с js и jq. Более того не различаю их.
Написал то, что работает. Однако осознаю всю тленность вида данного кода и прошу подсказать как сократить это:

var grab = "tits_rish_a1 tits_rish_a2 tits_rish_a3";

$(function(){
$('#b1').click(function(e){
$("#tits_click_a1").removeClass(grab).addClass("tits_rish_a1");
$("#tits_click_a2").removeClass(grab).addClass("tits_rish_a1");
$("#tits_click_a3").removeClass(grab).addClass("tits_rish_a1");
$('#tits_click_a1').attr("id", "tits_click_a1");
$('#tits_click_a2').attr("id", "tits_click_a1");
$('#tits_click_a3').attr("id", "tits_click_a1");
$('.tits_rish_a1').attr('style', '');
$('.tits_rish_a2').attr('style', '');
$('.tits_rish_a3').attr('style', '');
});

$('#b2').click(function(e){
$("#tits_click_a1").removeClass(grab).addClass("tits_rish_a2");
$("#tits_click_a2").removeClass(grab).addClass("tits_rish_a2");
$("#tits_click_a3").removeClass(grab).addClass("tits_rish_a2");
$('#tits_click_a1').attr("id", "tits_click_a2");
$('#tits_click_a2').attr("id", "tits_click_a2");
$('#tits_click_a3').attr("id", "tits_click_a2");
$('.tits_rish_a1').attr('style', '');
$('.tits_rish_a2').attr('style', '');
$('.tits_rish_a3').attr('style', '');
});

$('#b3').click(function(e){
$("#tits_click_a1").removeClass(grab).addClass("tits_rish_a3");
$("#tits_click_a2").removeClass(grab).addClass("tits_rish_a3");
$("#tits_click_a3").removeClass(grab).addClass("tits_rish_a3");
$('#tits_click_a1').attr("id", "tits_click_a3");
$('#tits_click_a2').attr("id", "tits_click_a3");
$('#tits_click_a3').attr("id", "tits_click_a3");
$('.tits_rish_a1').attr('style', '');
$('.tits_rish_a2').attr('style', '');
$('.tits_rish_a3').attr('style', '');
});
});

Comments

[Александр Лысенко]

Прикрепите пример html, а лучше загрузите все сюда

[Артур]

AlexanderZe:



а вот код страницы где меняется id элемента при клике на 1 из 3 "#b"

<div>
  <div class="rich_girls"><div>
  <div class="girls_rich_a">
  <div class="tits_rish_a1" id="tits_click_a1"></div>
  </div>
</div>

[Сергей Тутуков]

Rich: скажи, что тебе нужно сделать.
id не может повторятся на странице.

$('#tits_click_a1').attr("id", "tits_click_a3");
$('#tits_click_a2').attr("id", "tits_click_a3");
$('#tits_click_a3').attr("id", "tits_click_a3");

[Артур]

Сергей Тутуков:
дык вроде $('#tits_click_a1').attr("id", "tits_click_a3");
означает что у элемента с id="tits_click_a1" меняется id на tits_click_a3

А так вообще говнокод свой хотел сократить в приемлемый вид

[Сергей Соколов]

Rich: id не стоит менять. Один элемент – один id. Какого эффекта вы добиваетесь сменой id?

[Артур]

Сергей Соколов: того что элемент останется а вот функция при клике по нему уже другая будет

[Сергей Тутуков]

Rich:

$('#tits_click_a1').attr("id", "tits_click_a3");
$('#tits_click_a2').attr("id", "tits_click_a3");
$('#tits_click_a3').attr("id", "tits_click_a3");

id="tits_click_a1" меняется id на tits_click_a3
id="tits_click_a2" меняется id на tits_click_a3
id="tits_click_a3" меняется id на tits_click_a3

[Артур]

Сергей Тутуков: да, потому что при клике на id="b1" или id="b2" или id="b3" меняется id="tits_click_a(N)". Поэтому при клике на #b3 независимо от текущего id="tits_click_a(N)" он должен стать id="tits_click_a3".

[Сергей Тутуков]

Rich: я это понимаю, но как уже говорил:

id не может повторятся на странице.

у тебя после клика на id="b1", станет 3 бока с одинаковым id, если конечно они присутсвуют на странице

Answer 1

[Сергей Соколов]

Логика не понятна, но код можно упростить так:

var tRish = "tits_rish_a1 tits_rish_a2 tits_rish_a3";
var tRishClasses = tRish.split(' ').map(e=>'.' + e).join(', '); // список классов .tits_rish_a1, .tits_rish...
var tClick = "#tits_click_a1, #tits_click_a2, #tits_click_a3";
$(function() {
	
	function onClick(e) {
		var n = (n = this.id.match(/b(\d+)/)) ? n[1] : null; // n == 1, 2 или 3
		if(!n) return;
		
		$(tClick).removeClass(tRish).addClass( 'tits_rish_a' + n);
		// $(tClick).attr('id', 'tits_click_a' + n); // id менять некошерно!
		$(tRishClasses).attr('style', '');
	}
	
	$('#b1, #b2, #b3').on('click', onClick);
});

Одна функция обрабатывает клики. Определяет номер из id кликнутого элемента #b2 => 2 и далее использует полученный номер для составления классов/id.

Answer 2

[Alexei Kochetkov]

Вы порнобаннер чтоль делаете)

Comments

[Артур]

та не, кликер для развлечения и да, конепедальским методом

Answer 3

[Алексей Скляров]

Без HTML тут вряд ли поймешь что вы вообще хотите сделать. У вас выходит 3, формально, одинаковых блока (судя по ID) , к которым применяются, формально, 3 одинаковых класса. Почему бы вам просто не сделать ОДИН КЛАСС, к которому применяется ОДИН класс? А в CSS через :nth-child уже указывать стили для разных позиций этого класса?

Answer 4

[Stalker_RED]

Приветствую, я поверхностно знаком с js и jq. Более того не различаю их.

С этим довольно просто: jQuery сделан из (написан на) javascript.
Если представить что jQuery это такой крутецкий лего-замок с драконами и принцессами, то javascript - сами детальки из которых замок состоит. И из этих деталек можно собрать не только замок, но и аэропорт или нефтеперерабатывающий завод, например.

Если менять айди html-элементов, от этого очень часто возникает путаница и что-то ломается. Представьте что кто-то бегает по университету и меняет номера аудиторий - даже если он сам запомнил что куда менял, то остальные могут заблудиться. Лучше не делать так вообще.

И не стоит давать нескольким элементам одинаковый айди - мало того что это запрещено спецификациями - от этого тоже ломаются скрипты, при поиска по айди они находят только первый из нескольких одинаковых элементов.

И кроме того, при смене айди обработчик не изменится. Они навешиваются не на айди, а на сам элемент.
Используя тот-же пример с аудиториями, это как сказать "эй парни, отнесите этот проектор в аудиторию №2" а потом поменяйте таблички №2 и №3 местами" и при этом ожидать что проектор сам перенесется вслед за табличкой. (Подсказка: он не перенесется).

как сократить это

Скорее всего весь ваш код можно заменить чем-то строк на 10 (один обработчик на родительском элементе, смена класса вместо смены айди), но я не совсем понимаю что вы пытаетесь сделать, и поэтому не могу подсказать, как именно его нужно менять.

Answer 5

[Назар Мокринский]

Ваш код не имеет смысла, вы меняете id элементам, ставите одинаковые нескольким элементам сразу, чего делать нельзя (формально оно работать будет, но не так как должно).
По поводу сокращения - вы можете передавать несколько селекторов в jQuery:

$("#tits_click_a1, #tits_click_a2, #tits_click_a3")