@arturka_v_10

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

Приветствую, я поверхностно знаком с 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', '');
});
});
  • Вопрос задан
  • 206 просмотров
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Логика не понятна, но код можно упростить так:
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.
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
AngelOfSnow
@AngelOfSnow
Embedded software engineer
Вы порнобаннер чтоль делаете)
Ответ написан
Без HTML тут вряд ли поймешь что вы вообще хотите сделать. У вас выходит 3, формально, одинаковых блока (судя по ID) , к которым применяются, формально, 3 одинаковых класса. Почему бы вам просто не сделать ОДИН КЛАСС, к которому применяется ОДИН класс? А в CSS через :nth-child уже указывать стили для разных позиций этого класса?
Ответ написан
Stalker_RED
@Stalker_RED
Приветствую, я поверхностно знаком с js и jq. Более того не различаю их.

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

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

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

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

как сократить это
Скорее всего весь ваш код можно заменить чем-то строк на 10 (один обработчик на родительском элементе, смена класса вместо смены айди), но я не совсем понимаю что вы пытаетесь сделать, и поэтому не могу подсказать, как именно его нужно менять.
Ответ написан
nazarpc
@nazarpc
Open Source enthusiast
Ваш код не имеет смысла, вы меняете id элементам, ставите одинаковые нескольким элементам сразу, чего делать нельзя (формально оно работать будет, но не так как должно).
По поводу сокращения - вы можете передавать несколько селекторов в jQuery:
$("#tits_click_a1, #tits_click_a2, #tits_click_a3")
Ответ написан
Ваш ответ на вопрос

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

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