@DeniSidorenko

Какие советы можете дать по улучшению данного кода?

Добрый день есть такой код фильтра на JS
Буду рад если потратите минуту своего времени и критичным взглядом напишите что следует поменять и что улучшить
заранее спасибо

$('#filter-aply').on('click',function(){


    var etage = $('.filter-item__buttons').children('.button.active').data('etg')
    etage = parseFloat(etage)


    // Square
    var squareMin = $("#js-range__metr").data('from')
    squareMin = parseFloat(squareMin)

    var squareMax = $("#js-range__metr").data('to')
    squareMax = parseFloat(squareMax)


    // Price
    var priceMin = $("#js-range__price").data('from')
    priceMin = parseFloat(priceMin)

    var priceMax = $("#js-range__price").data('to')
    priceMax = parseFloat(priceMax)

    var dataCount = 0;

    var saleItems = $('.sale-item')



    for(var i = 0; i<saleItems.length; i++){

      var item = saleItems[i]

      var etageLocal = $(item).data('etage')
      etageLocal = parseFloat(etageLocal)

      var price = $(item).data('price')
      price = parseFloat(price)

      var square = $(item).data('square')
      square = parseFloat(square)


      if(price <= priceMax && price >= priceMin){
        eqPrice = true;
      }
      else{
        eqPrice = false;
      }
      if(etageLocal == etage){
        eqEtage = true;
      }
      else{
        eqEtage = false;
      }
      if(square <= squareMax && square >= squareMin){
        eqSquare = true
      }
      else{
        eqSquare = false;
      }


      if(eqEtage == false || eqPrice == false || eqSquare == false){
        $(item).removeClass('showed')
        $(item).removeAttr('data-count')
      }
      if(eqPrice == true && eqEtage == true && eqSquare == true){
        $(item).addClass('showed')
        dataCount++;
        $(item).attr('data-count', dataCount)
        $('.sale-item__eye').attr('data-position', dataCount)
        $('.sale-item[data-count="1"]').click()
      }



    }


  })
  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
l3ftoverz
@l3ftoverz Куратор тега JavaScript
Люблю Финский металкор и ищу работу.
У тебя есть лишние условия if, они не нужны, используй тернарный оператор или запись результата выражения в переменную, это сократит код с минимум 6 строк (if .. else ...) до одной. Ты постоянно получаешь элементы из DOM дерева, что не очень хорошо, хотя возможно их кеширует JQuery, ну и ты используешь JQuery и явный парсинг значений в float.

Я бы сделал как-то так (над логикой даже не думал, может можно ещё проще):
const applyButton = document.querySelector("#filter-aply");
const eTage = document.querySelector(".filter-item__buttons .button.active");

const rangeOfMetr = document.querySelector("#js-range__metr");
const rangeOfPrice = document.querySelector("#js-range__price");

const saleItem = document.querySelector(".sale-item__eye");
const firstSaleItem = document.querySelector('.sale-item[data-count="1"]');


applyButton.addEventListener("click", event => {
  const etage = +eTage.dataset.etg;
  const [ squareMin, squareMax ] = [ +rangeOfMetr.dataset.from, +rangeOfMetr.dataset.to ];
  const [ priceMin, priceMax ] = [ +rangeOfPrice.dataset.from, +rangeOfPrice.dataset.to ];
  
  let counter = 0;
  document.querySelectorAll(".sale-item").forEach(item => {
    const [ localEtage, localPrice, localSquare ] = [
      +item.dataset.etage,
      +item.dataset.price,
      +item.dataset.square
    ];
    
    const priceCondition = localPrice <= priceMax && localPrice >= priceMin;
    const etageCondition = localEtage === etage;
    const squareCondition = localSquare <= squareMax && localSquare >= squareMin;
    
    if (!priceCondition || !etageCondition || !squareCondition) {
      item.classList.remove("showed");
      item.removeAttribute("data-count");
    }
    
    if (priceCondition && etageCondition && squareCondition) {
      counter += 1;
      item.classList.add("showed");
      item.dataset.position = counter;
      saleItem.dataset.position = counter;
      firstSaleItem.click()
    }
  });
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
TTATPuOT
@TTATPuOT
https://code.patriotovsky.ru/
$('#filter-aply').on('click', () => {
	const jsMetr = $("#js-range__metr");
	const jsRange = $("#js-range__price");

	const etage = parseFloat($('.filter-item__buttons').children('.button.active').data('etg'));

	// Square
	const squareMin = parseFloat(jsMetr.data('from'));
	const squareMax = parseFloat(jsMetr.data('to'));

	// Price
	const priceMin = parseFloat(jsRange.data('from'));
	const priceMax = parseFloat(jsRange.data('to'));

	let dataCount = 0;

	$('.sale-item').each(function() {
		const etageLocal = parseFloat($(this).data('etage'));
		const price = parseFloat($(this).data('price'));
		const square = parseFloat($(this).data('square'));

		let eqPrice = false;
		let eqEtage = false;
		let eqSquare = false;

		if (price <= priceMax && price >= priceMin) eqPrice = true;
		if (etageLocal == etage) eqEtage = true;
		if (square <= squareMax && square >= squareMin) eqSquare = true


		if (!eqEtage || !eqPrice || !eqSquare) {
			$(this).removeClass('showed')
			$(this).removeAttr('data-count')
		}

		if(eqPrice && eqEtage && eqSquare){
			$(this).addClass('showed')
			dataCount++;
			$(this).attr('data-count', dataCount)
			$('.sale-item__eye').attr('data-position', dataCount)
			$('.sale-item[data-count="1"]').click()
		}
	});
});
Ответ написан
Ваш ответ на вопрос

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

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