Как использовать значение выбора, чтобы показать определенный div (div радиокнопок)? - PullRequest
Новая
       17

Как использовать значение выбора, чтобы показать определенный div (div радиокнопок)?

0 голосов
/ 02 декабря 2019

Моя цель: пользователь выбирает вариант 1, и отображается соответствующий div. Пользователь выбирает выбор 2, деление выбора 1 исчезает и показывает деление выбора 2.

Что у меня есть: в настоящее время я могу получить только значение выбора при изменении, как мне связать его ссоответствующие дивы? У меня есть все отображение div: нет, лучше ли показывать show () и hide ()? CodePen здесь .

HTML 

<select id="categories">
    <option selected="selected" class="displayNone">Category...</option>
    <option value="politics">Politics</option>
    <option value="business">Business</option>
    <option value="sports">Sports</option>
    <option value="health">Health</option>
    <option value="scienceTechnology">Science & Technology</option>
</select>

<div class="politicsLabels">
  <label for="trump">Donald Trump</label>
  <input type="radio"
  value="trump">

  <label for="us%20election">US Election</label>
  <input type="radio" 
  value="us%20election">

  <label for="justin%20trudeau">Justin Trudeau</label>
  <input type="radio" 
  value="justin%20trudeau">

  <label for="brexit">Brexit</label>
  <input type="radio" 
  value="brexit">

  <label for="hong%20kong">Hong Kong</label>
  <input type="radio" 
  value="hong%20kong">
</div>
<!-- end of politics labels -->
<!-- business labels -->
<div class="businessLabels">
  <label for="stocks">Stocks</label>
  <input type="radio"
  value="stocks">

  <label for="bitcoin">Bitcoin</label>
  <input type="radio" 
  value="bitcoin">

  <label for="oil%20market">Oil</label>
  <input type="radio" 
  value="oil%20market">

  <label for="housing%20crisis">Housing</label>
  <input type="radio" 
  value="housing%20crisis">

  <label for="marijuana%20market">Marijuana</label>
  <input type="radio" 
  value="marijuana%20market">
</div>
<!-- end of business labels -->
<!--sports labels -->
<div class="sportsLabels">
  <label for="nhl">Hockey</label>
  <input type="radio"
  value="nhl">

  <label for="mlb">Baseball</label>
  <input type="radio" 
  value="mlb">

  <label for="nfl">Football</label>
  <input type="radio" 
  value="nfl">

  <label for="nba">Basketball</label>
  <input type="radio" 
  value="nba">

  <label for="pga%20tour">Golf</label>
  <input type="radio" 
  value="pga%20tour">        
</div>
<!-- end of sports labels -->
<!-- start of health labels -->
<div class="healthLabels">
  <label for="fitness">Fitness</label>
  <input type="radio"
  value="fitness">

  <label for="meditation">Meditation</label>
  <input type="radio"
  value="meditation">

  <label for="mental%20illness">Mental Health</label>
  <input type="radio" 
  value="mental%20illness">

  <label for="e-cigarettes">E-Cigarettes</label>
  <input type="radio" 
  value="e-cigarettes">

  <label for="alcohol">Alcohol</label>
  <input type="radio" 
  value="alcohol">
</div>
<!-- end of health labels -->
<!-- start of Science & Technology labels -->
<div class="scienceTechnologyLabels">
  <label for="climate">Climate Change</label>
  <input type="radio"
  value="climate">

  <label for="apple">Apple</label>
  <input type="radio"
  value="apple">

  <label for="microsoft">Microsoft</label>
  <input type="radio" 
  value="microsoft">

  <label for="tesla">Tesla</label>
  <input type="radio" 
  value="tesla">

  <label for="microdosing">Microdosing</label>
  <input type="radio" 
  value="microdosing">
</div>
<!-- end of Science & Technology labels -->


CSS

.wrapper {
  width: 110rem;
  margin: 0 auto;
}

html {
  font-size: 62.5%;
  color: #f1f1f1;
}

body {
  font-size: 1.6rem;
  font-family: 'Bebas Neue', cursive;
  background-color: #24292E;
}

.displayNone {
  display: none;
}

header {
  text-align: center;
}

header h1 {
  font-size: 9rem;
  margin: 5rem 0 8rem 0;
  border-bottom: solid .4rem #f1f1f1;
}

header h2 {
  font-size: 4rem;
  margin: 5rem 0 0 0;
}

select {
  font-family: 'Roboto', sans-serif;
  color: #010101;
  font-size: 2rem;
  width: 25rem;
  padding: 1rem 2rem;
  margin: 2rem 0;
  border: .3rem solid #f1f1f1;
  border-radius: 1rem;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: url("down-arrow.svg");
  background-repeat: no-repeat, repeat;
  background-position: right 2rem top 60%, 0 0;
  background-size: 1.8rem;
  background-color: #f1f1f1;
}

.politicsLabels,
.businessLabels,
.sportsLabels,
.healthLabels,
.scienceTechnologyLabels {
  display: none;
}

jQuery 

  $('#categories').on('change', function() {
    const categoryChosen = $('option:selected', this).attr('value');
    console.log(categoryChosen);
  });

Ответы [ 2 ]

1 голос
/ 02 декабря 2019

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

$('#categories').on('change', function() {
    const categoryChosen = $('option:selected', this).attr('value');
    // hide all categories
    $('div[class$="Labels"]').hide();
    // show the selected category
    $('.' + categoryChosen + 'Labels').show();
});


  $('#categories').on('change', function() {
    const categoryChosen = $('option:selected', this).attr('value');
    // hide all categories
    $('div[class$="Labels"]').hide();
    // show the selected category
    $('.' + categoryChosen + 'Labels').show();
  });
.wrapper {
  width: 110rem;
  margin: 0 auto;
}

html {
  font-size: 62.5%;
  color: #f1f1f1;
}

body {
  font-size: 1.6rem;
  font-family: 'Bebas Neue', cursive;
  background-color: #24292E;
}

.displayNone {
  display: none;
}

header {
  text-align: center;
}

header h1 {
  font-size: 9rem;
  margin: 5rem 0 8rem 0;
  border-bottom: solid .4rem #f1f1f1;
}

header h2 {
  font-size: 4rem;
  margin: 5rem 0 0 0;
}

select {
  font-family: 'Roboto', sans-serif;
  color: #010101;
  font-size: 2rem;
  width: 25rem;
  padding: 1rem 2rem;
  margin: 2rem 0;
  border: .3rem solid #f1f1f1;
  border-radius: 1rem;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background: url("down-arrow.svg");
  background-repeat: no-repeat, repeat;
  background-position: right 2rem top 60%, 0 0;
  background-size: 1.8rem;
  background-color: #f1f1f1;
}

.politicsLabels,
.businessLabels,
.sportsLabels,
.healthLabels,
.scienceTechnologyLabels {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="categories">
    <option selected="selected" class="displayNone">Category...</option>
    <option value="politics">Politics</option>
    <option value="business">Business</option>
    <option value="sports">Sports</option>
    <option value="health">Health</option>
    <option value="scienceTechnology">Science & Technology</option>
</select>

<div class="politicsLabels">
  <label for="trump">Donald Trump</label>
  <input type="radio"
  value="trump">

  <label for="us%20election">US Election</label>
  <input type="radio" 
  value="us%20election">

  <label for="justin%20trudeau">Justin Trudeau</label>
  <input type="radio" 
  value="justin%20trudeau">

  <label for="brexit">Brexit</label>
  <input type="radio" 
  value="brexit">

  <label for="hong%20kong">Hong Kong</label>
  <input type="radio" 
  value="hong%20kong">
</div>
<!-- end of politics labels -->
<!-- business labels -->
<div class="businessLabels">
  <label for="stocks">Stocks</label>
  <input type="radio"
  value="stocks">

  <label for="bitcoin">Bitcoin</label>
  <input type="radio" 
  value="bitcoin">

  <label for="oil%20market">Oil</label>
  <input type="radio" 
  value="oil%20market">

  <label for="housing%20crisis">Housing</label>
  <input type="radio" 
  value="housing%20crisis">

  <label for="marijuana%20market">Marijuana</label>
  <input type="radio" 
  value="marijuana%20market">
</div>
<!-- end of business labels -->
<!--sports labels -->
<div class="sportsLabels">
  <label for="nhl">Hockey</label>
  <input type="radio"
  value="nhl">

  <label for="mlb">Baseball</label>
  <input type="radio" 
  value="mlb">

  <label for="nfl">Football</label>
  <input type="radio" 
  value="nfl">

  <label for="nba">Basketball</label>
  <input type="radio" 
  value="nba">

  <label for="pga%20tour">Golf</label>
  <input type="radio" 
  value="pga%20tour">        
</div>
<!-- end of sports labels -->
<!-- start of health labels -->
<div class="healthLabels">
  <label for="fitness">Fitness</label>
  <input type="radio"
  value="fitness">

  <label for="meditation">Meditation</label>
  <input type="radio"
  value="meditation">

  <label for="mental%20illness">Mental Health</label>
  <input type="radio" 
  value="mental%20illness">

  <label for="e-cigarettes">E-Cigarettes</label>
  <input type="radio" 
  value="e-cigarettes">

  <label for="alcohol">Alcohol</label>
  <input type="radio" 
  value="alcohol">
</div>
<!-- end of health labels -->
<!-- start of Science & Technology labels -->
<div class="scienceTechnologyLabels">
  <label for="climate">Climate Change</label>
  <input type="radio"
  value="climate">

  <label for="apple">Apple</label>
  <input type="radio"
  value="apple">

  <label for="microsoft">Microsoft</label>
  <input type="radio" 
  value="microsoft">

  <label for="tesla">Tesla</label>
  <input type="radio" 
  value="tesla">

  <label for="microdosing">Microdosing</label>
  <input type="radio" 
  value="microdosing">
</div>
<!-- end of Science & Technology labels -->
0 голосов
/ 02 декабря 2019

Дайте каждому id, соответствующий опции выбора. Такие как 

<div class="politicsLabels" id=politics>

Затем вы можете показать или спрятать по id, например, 

$("#politics").show()

или 

$('option:selected').show()
...