Проблема с добавлением класса в родительский блок выбора через jQuery, так как он применяется ко всем родительским элементам блока выбора на странице - PullRequest
Новая
       33

Проблема с добавлением класса в родительский блок выбора через jQuery, так как он применяется ко всем родительским элементам блока выбора на странице

1 голос
/ 22 апреля 2020

У меня небольшие проблемы с jQuery, у меня будет sh, чтобы иметь 3 отдельных поля выбора, и когда поле выбора выбрано, родительский div получает заданный текст Option как класс. У меня, однако, возникают проблемы, поскольку вместо этого отображаются все значения на странице, а не отдельные.

Я пытался использовать (это), но мне, к сожалению, не повезло.

Моя цель - щелкнуть, например, по среднему полю и изменить параметр на «Синий», тогда его родительский div будет

<div class="tableoptioncontainer Blue "</div>

, но вместо этого проблема в этом

<div class="tableoptioncontainer ColourBlueColour"</div>

https://jsfiddle.net/jack319082/psLtarno/6/

HTML: 

<div class="row-container">

  <div class="tableoptioncontainer">
    <select id="selectbox">
      <option>Colour</option>
      <option>Red</option>
      <option>Orange</option>
      <option>Light Orange</option>
      <option>Yellow</option>
   </select>
  </div>


  <div class="tableoptioncontainer">
   <select id="selectbox">
     <option>Colour</option>
     <option>Light Blue</option>
     <option>Blue</option>
     <option>Dark Blue</option>
      <option>Violet</option>
   </select>
  </div>

  <div class="tableoptioncontainer">
    <select id="selectbox">
      <option>Colour</option>
      <option>Dark Green</option>
     <option>Moss</option>
      <option>Green</option>
      <option>Aqua</option>
   </select>
  </div>

</div>

CSS: 

.row-container {
  background-color: grey;
  padding: 10px 20px;
  display: inline-block;
}

.tableoptioncontainer {
  padding: 12px;
  margin: 8px 0px;
  background-color: rgba(0, 0, 0, 0.2);
}


/* Background Colours for when it works */
.Red {background-color: #ff0000}
.Orange {background-color: #ff9000}
.Light-Orange {background-color: #ffc272}
.Yellow {background-color: #fff225}
.Light-Blue {background-color: #8bc2ff}
.Blue {background-color: #0078ff}
.Dark-Blue {background-color: #0030ba}
.Violet {background-color: #4603dd}
.Dark-Green {background-color: #00390f}
.Moss {background-color: #009126}
.Green {background-color: #00f13e}
.Aqua {background-color: #00f1d2}

jQuery: 

jQuery(document).ready(function(){

      jQuery("select").change(function(){
          var colourName = jQuery('select#selectbox :selected').text();
          colourName = colourName.replace(/ /g, '-');
     jQuery(this).parent().attr('class','tableoptioncontainer');
          jQuery(this).parent().addClass(colourName);
       });

});

1 Ответ

0 голосов
/ 22 апреля 2020

Вы должны изменить свой скрипт следующим образом 

 jQuery(document).ready(function(){
  jQuery("select").change(function(){
      var colourName = jQuery(this).find('option:selected').text();
      colourName = colourName.replace(/ /g, '-');
      jQuery(this).parent().attr('class','tableoptioncontainer');
      jQuery(this).parent().addClass(colourName);
   });
 });

Ваша декларация var colourName = jQuery('select#selectbox :selected').text(); выбирает текст выбранных опций из всех 3 полей выбора. И обратите внимание, что идентификаторы должны быть уникальными, у вас есть одинаковые id="selectbox" для всех выборов.

...