WedX - журнал о программировании и компьютерных науках

Как я могу упростить этот код jQuery?

Я пытаюсь сделать каждый div немного более непрозрачным, чем другие, по одному. Как видите, я уже упростил некоторые из них, создав переменные.

var f1 = $('#f1');
var f2 = $('#f2');
var f3 = $('#f3');
var f4 = $('#f4');

if(art==1){
f1.css('opacity',1);
f2.css('opacity',0.9);
f3.css('opacity',0.9);
f4.css('opacity',0.9);
}else if(art==2){
f1.css('opacity',0.9);
f2.css('opacity',1);
f3.css('opacity',0.9);
f4.css('opacity',0.9);
}else if(art==3){
f1.css('opacity',0.9);
f2.css('opacity',0.9);
f3.css('opacity',1);
f4.css('opacity',0.9);
}else if (art==4){
f1.css('opacity',0.9);
f2.css('opacity',0.9);
f3.css('opacity',0.9);
f4.css('opacity',1);
}
jquery simplify
22.02.2012

  • Почему вы публикуете это сразу после того, как разместили здесь такой же вопрос? Учитесь на предыдущих ответах и ​​попробуйте что-нибудь сами в этом коде. Если вы застряли, пытаясь что-то сделать самостоятельно, задайте более конкретный вопрос. Мы здесь не для того, чтобы переписывать ваш код за вас. Голосование за закрытие как слишком локализованное. 22.02.2012
  • Потому что вы не можете сделать это с помощью цикла for. и я только вчера начал работать с jQuery. 22.02.2012

Ответы:


1 
$("#f1,#f2,#f3,#f4").css("opacity", 0.9);
$("#f" + art).css("opacity", 1);

или в 1 строке вы можете сделать:

$("#f1,#f2,#f3,#f4").css("opacity", 0.9).filter("#f" + art).css("opacity", 1);

Я очень сомневаюсь, что вы увидите изменение непрозрачности для div, соответствующее #f+art, но если бы вы это сделали, вы могли бы исправить это следующим образом:

$("#f1,#f2,#f3,#f4").not("#f" + art).css("opacity", 0.9);
$("#f" + art).css("opacity", 1);

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

PS. Это запах кода (f+art)

22.02.2012

2

Как насчет

var f1 = $('#f1');
var f2 = $('#f2');
var f3 = $('#f3');
var f4 = $('#f4');

var fAll = $([f1, f2, f3, f4]);

fAll
   .css('opacity',0.9)
   .eq(art-1) // -1 because arrays are 0-based
   .css('opacity',1);

Вы должны немного прочитать о том, как jQuery использует наборы результатов (не только отдельные элементы) и как обходить и манипулировать ими

22.02.2012

3

Это не сильно упрощенная, но хорошая структура.

var f1 = $("#f1"),
f2 = $("#f2"),
f3 = $("#f3"),
f4 = $("#f4");
art == 1 ? (f1.css("opacity", 1), f2.css("opacity", .9), f3.css("opacity", .9), f4.css("opacity", .9)) : art == 2 ? (f1.css("opacity", .9), f2.css("opacity", 1), f3.css("opacity", .9), f4.css("opacity", .9)) : art == 3 ? (f1.css("opacity", .9), f2.css("opacity", .9), f3.css("opacity", 1), f4.css("opacity", .9)) : art == 4 && (f1.css("opacity", .9), f2.css("opacity", .9), f3.css("opacity", .9), f4.css("opacity", 1))
09.11.2012
Новые материалы
Объяснение документов 02: BERT
BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
Как проанализировать работу вашего классификатора?
Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..
Учебные заметки: создание моего первого пакета Node.js
Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..
Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..
Для любых предложений по сайту: [email protected]