БЛОГ НА HUSL


Как правильно вывести сравнение условий в jQuery?

Автор вопроса: Aleksandr

Есть короткий опрос из 5 столбцов, в которых по 5 выбора ответа.

Самое элементарное условия я сделал, если у ответа есть больше 2 очков, то победил этот ответ.

А вот если у ответа 2 очка, а остальных по единице? Как подсчитать победителя?

ТЗ изначально такое:

  1. Пять вопросов.

  2. В них по 5 ответов.

  3. Во всех вопросах учавствуют 5 писателей к ним прикрепленные финальные результаты из 5 бутылок вина.

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

  5. Если победителя нет, то выберается одна рендомная бутылка.

$(document).ready(function() {
  $('.js__control').click(function() {
    let js__remarkCount = $('.js__remark:checked').length,
      js__mayakovskyCount = $('.js__mayakovsky:checked').length,
      js__bulgakovCount = $('.js__bulgakov:checked').length,
      js__fitzgeraldCount = $('.js__fitzgerald:checked').length,
      js__hemingwayCount = $('.js__hemingway:checked').length;


    if (js__remarkCount > 2) {
      $('.result').text('js__remark: ' + js__remarkCount);
      console.log('js__remark: ' + js__remarkCount);
    } else if (js__mayakovskyCount > 2) {
      $('.result').text('js__remark: ' + js__mayakovskyCount);
      console.log('js__mayakovsky: ' + js__mayakovskyCount);
    } else if (js__bulgakovCount > 2) {
      $('.result').text('js__remark: ' + js__bulgakovCount);
      console.log('js__bulgakov: ' + js__bulgakovCount);
    } else if (js__fitzgeraldCount > 2) {
      $('.result').text('js__remark: ' + js__fitzgeraldCount);
      console.log('js__fitzgerald: ' + js__fitzgeraldCount);
    } else if (js__hemingwayCount > 2) {
      $('.result').text('js__remark: ' + js__hemingwayCount);
      console.log('js__hemingway: ' + js__hemingwayCount);
    } else {
      /* Вот тут как-то надо найти победителя */

      console.log('js__remark: ' + js__remarkCount);

      console.log('js__mayakovsky: ' + js__mayakovskyCount);

      console.log('js__bulgakov: ' + js__bulgakovCount);

      console.log('js__fitzgerald: ' + js__fitzgeraldCount);

      console.log('js__hemingway: ' + js__hemingwayCount);
    }


    $('.quiz').addClass('hide').next('#final').removeClass('hide');
  });
});
.quiz {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 50%;
}

.js__control {
  width: 100%;
  padding: 8px;
  margin-top: 32px;
}

.item {
  display: block
}

.hide {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quiz">
  <div class="box">
    <h3>Вы влюбились. Как будете завоевывать объект воздыханий?</h3>


    <label class="item">
      <input type="radio" name="1" class="js__remark" checked>
      Начну очаровывать безупречными манерами (Ремарк)
    </label>


    <label class="item">
      <input type="radio" name="1" class="js__mayakovsky">
      Задарю подарками (Маяковский)
    </label>


    <label class="item">
      <input type="radio" name="1" class="js__bulgakov">
      Посвящу роман (Булгаков)
    </label>


    <label class="item">
      <input type="radio" name="1" class="js__fitzgerald">
      Позову на танцы (Фицджеральд)
    </label>


    <label class="item">
      <input type="radio" name="1" class="js__hemingway">
      Никак, я красив и талантлив (Хемингуэй)
    </label>
  </div>


  <div class="box">
    <h3>Какое у вас хобби?</h3>


    <label class="item">
      <input type="radio" name="2" class="js__hemingway" checked>
      Спорт (Хемингуэй)
    </label>


    <label class="item">
      <input type="radio" name="2" class="js__bulgakov">
      Настольные игры (Булгаков)
    </label>


    <label class="item">
      <input type="radio" name="2" class="js__remark">
      Коллекционирование (Ремарк)
    </label>


    <label class="item">
      <input type="radio" name="2" class="js__fitzgerald">
      Музыка (Фицджеральд)
    </label>


    <label class="item">
      <input type="radio" name="2" class="js__mayakovsky">
      Игра в бильярд (Маяковский)
    </label>
  </div>


  <div class="box">
    <h3>Как бы вы описали свой характер?</h3>


    <label class="item">
      <input type="radio" name="3" class="js__hemingway" checked>
      Властный, мужественный, бесстрашный (Хемингуэй)
    </label>


    <label class="item">
      <input type="radio" name="3" class="js__bulgakov">
      Обаятельный и ранимый (Булгаков)
    </label>


    <label class="item">
      <input type="radio" name="3" class="js__remark">
      Сложный и противоречивый (Ремарк)
    </label>


    <label class="item">
      <input type="radio" name="3" class="js__fitzgerald">
      Романтичный и лёгкий (Фицджеральд)
    </label>


    <label class="item">
      <input type="radio" name="3" class="js__mayakovsky">
      Вежливый и ласковый (Маяковский)
    </label>
  </div>


  <div class="box">
    <h3>Какие напитки должны быть в домашнем баре?</h3>


    <label class="item">
      <input type="radio" name="4" class="js__remark" checked>
      Полное разнообразие вкусов и стилей, чтобы сделать любой коктейль (Ре-марк)
    </label>


    <label class="item">
      <input type="radio" name="4" class="js__bulgakov">
      Исключительное крепкие (Булгаков)
    </label>


    <label class="item">
      <input type="radio" name="4" class="js__mayakovsky">
      Лёгкие (Маяковский)
    </label>


    <label class="item">
      <input type="radio" name="4" class="js__hemingway">
      Всё зависит от настроения (Хемингуэй)
    </label>


    <label class="item">
      <input type="radio" name="4" class="js__fitzgerald">
      Крепкие с нейтральным вкусом. Им можно придать любую форму (Фицдже-ральд)
    </label>
  </div>


  <div class="box">
    <h3>Куда бы отправились в путешествие?</h3>


    <label class="item">
      <input type="radio" name="5" class="js__remark" checked>
      По всему миру (Ремарк)
    </label>


    <label class="item">
      <input type="radio" name="5" class="js__mayakovsky">
      Париж (Маяковский)
    </label>


    <label class="item">
      <input type="radio" name="5" class="js__bulgakov">
      Прага или Будапешт (Булгаков)
    </label>


    <label class="item">
      <input type="radio" name="5" class="js__hemingway">
      Куба (Хемингуэй)
    </label>


    <label class="item">
      <input type="radio" name="5" class="js__fitzgerald">
      Лазурный берег (Фицджеральд)
    </label>
  </div>


  <button class="js__control" type="button">
    Подсчитать
  </button>
</div>


<section id="final" class="hide">
  Готово! <span class="result"></span>
</section>


Источник

Ответы (1 шт):

Автор решения: Bamberg 

$(document).ready(function() {
  $('.js__control').click(function() {
    let results = {
      'remark': $('.js__remark:checked').length,
      'mayakovsky': $('.js__mayakovsky:checked').length,
      'bulgakov': $('.js__bulgakov:checked').length,
      'fitzgerald': $('.js__fitzgerald:checked').length,
      'hemingway': $('.js__hemingway:checked').length
    };
    
    let authors = ['remark', 'mayakovsky', 'bulgakov', 'fitzgerald', 'hemingway'];
    
    let max = {
      author: 'remark',
      count: results['remark']
    }
    
    let isEqual = true;
    
    for (let author in results) {
      if (results[author] !== max.count) isEqual = false;
      if (results[author] > max.count) {
        max.count = results[author];
        max.author = author;
      }
    }
    
    if (isEqual) {
      let randormAuthor = authors[Math.floor(Math.random() * authors.length)];
      console.log(`${randormAuthor}: 1`);
    } else {
      console.log(`${max.author}:${max.count}`); 
    }

    $('.quiz').addClass('hide').next('#final').removeClass('hide');
  });
});
.quiz {
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: 50%;
}

.js__control {
  width: 100%;
  padding: 8px;
  margin-top: 32px;
}

.item {
  display: block
}

.hide {
  display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quiz">
  <div class="box">
    <h3>Вы влюбились. Как будете завоевывать объект воздыханий?</h3>


    <label class="item">
      <input type="radio" name="1" class="js__remark" checked>
      Начну очаровывать безупречными манерами (Ремарк)
    </label>


    <label class="item">
      <input type="radio" name="1" class="js__mayakovsky">
      Задарю подарками (Маяковский)
    </label>


    <label class="item">
      <input type="radio" name="1" class="js__bulgakov">
      Посвящу роман (Булгаков)
    </label>


    <label class="item">
      <input type="radio" name="1" class="js__fitzgerald">
      Позову на танцы (Фицджеральд)
    </label>


    <label class="item">
      <input type="radio" name="1" class="js__hemingway">
      Никак, я красив и талантлив (Хемингуэй)
    </label>
  </div>


  <div class="box">
    <h3>Какое у вас хобби?</h3>


    <label class="item">
      <input type="radio" name="2" class="js__hemingway" checked>
      Спорт (Хемингуэй)
    </label>


    <label class="item">
      <input type="radio" name="2" class="js__bulgakov">
      Настольные игры (Булгаков)
    </label>


    <label class="item">
      <input type="radio" name="2" class="js__remark">
      Коллекционирование (Ремарк)
    </label>


    <label class="item">
      <input type="radio" name="2" class="js__fitzgerald">
      Музыка (Фицджеральд)
    </label>


    <label class="item">
      <input type="radio" name="2" class="js__mayakovsky">
      Игра в бильярд (Маяковский)
    </label>
  </div>


  <div class="box">
    <h3>Как бы вы описали свой характер?</h3>


    <label class="item">
      <input type="radio" name="3" class="js__hemingway" checked>
      Властный, мужественный, бесстрашный (Хемингуэй)
    </label>


    <label class="item">
      <input type="radio" name="3" class="js__bulgakov">
      Обаятельный и ранимый (Булгаков)
    </label>


    <label class="item">
      <input type="radio" name="3" class="js__remark">
      Сложный и противоречивый (Ремарк)
    </label>


    <label class="item">
      <input type="radio" name="3" class="js__fitzgerald">
      Романтичный и лёгкий (Фицджеральд)
    </label>


    <label class="item">
      <input type="radio" name="3" class="js__mayakovsky">
      Вежливый и ласковый (Маяковский)
    </label>
  </div>


  <div class="box">
    <h3>Какие напитки должны быть в домашнем баре?</h3>


    <label class="item">
      <input type="radio" name="4" class="js__remark" checked>
      Полное разнообразие вкусов и стилей, чтобы сделать любой коктейль (Ре-марк)
    </label>


    <label class="item">
      <input type="radio" name="4" class="js__bulgakov">
      Исключительное крепкие (Булгаков)
    </label>


    <label class="item">
      <input type="radio" name="4" class="js__mayakovsky">
      Лёгкие (Маяковский)
    </label>


    <label class="item">
      <input type="radio" name="4" class="js__hemingway">
      Всё зависит от настроения (Хемингуэй)
    </label>


    <label class="item">
      <input type="radio" name="4" class="js__fitzgerald">
      Крепкие с нейтральным вкусом. Им можно придать любую форму (Фицдже-ральд)
    </label>
  </div>


  <div class="box">
    <h3>Куда бы отправились в путешествие?</h3>


    <label class="item">
      <input type="radio" name="5" class="js__remark" checked>
      По всему миру (Ремарк)
    </label>


    <label class="item">
      <input type="radio" name="5" class="js__mayakovsky">
      Париж (Маяковский)
    </label>


    <label class="item">
      <input type="radio" name="5" class="js__bulgakov">
      Прага или Будапешт (Булгаков)
    </label>


    <label class="item">
      <input type="radio" name="5" class="js__hemingway">
      Куба (Хемингуэй)
    </label>


    <label class="item">
      <input type="radio" name="5" class="js__fitzgerald">
      Лазурный берег (Фицджеральд)
    </label>
  </div>


  <button class="js__control" type="button">
    Подсчитать
  </button>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.