Изменение цвета панели аккордеона на основе ввода пользователя

0

У меня есть виджет аккордеона, который работает, чтобы перевернуть вопросы, см. В JSFiddle.

Я бы хотел, чтобы аккордеон менял цвет, если пользователь выбирает определенный переключатель. Есть четыре варианта, которые пользователь может предоставить в качестве ответа: Да (Y), Нет (N), Не указано (NS) и Не применимо (NA). В частности, если пользователь выбирает Y, NS или NA - цвет идет "Зеленый"; если N - цвет идет "красный". Если не выбрано (состояние по умолчанию) - ничего не меняется.

Вот HTML-код содержания аккордеона.

<div id="Q412">
  <table class="QTable">
  <tr>
  <td width="45"  align="left" valign="top" scope="row"><div class="QNumber">4.12</div></td>
  <td width="100%"  align="left" valign="top">
  <div class="QText">Text of the question</div>
  </td>
  </tr>
  </table>
</div>

<div>
  <table class="RTable">
  <tr>
  <td width="100%"  align="left" valign="top" style="padding-right:20px">
   <div class="Guidance"><p>Content of the guidance</p>
   </div>
   </td>

    <td width="550" align="left" valign="baseline">
    <div class="Response">
      <label><input type="radio" name="Radio412" value="Y" id="Radio_412Y" onchange='radioChange(this, "412")'>Yes</label>
            <label><input type="radio" name="Radio412" value="N" id="Radio_412N" onChange='radioChange(this, "412")'>No</label>
            <label><input type="radio" name="Radio412" value="NS" id="Radio_412NS" onChange='radioChange(this, "412")'>Not Seen</label>
            <label><input type="radio" name="Radio412" value="NA" id="Radio_412NA" onChange='radioChange(this, "412")'>Not Applicable</label>
     </div>

     <div id="responseDetails">
     <div class="Observation">
        <label for="observation">Observation:</label>
        <textarea name="observation" id="Obs412" rows="6" disabled style="width: 530px;" placeholder="Enter text of observation here ..."></textarea>
     </div>
     <div id="DueDate">
            <label for="DueDate">Due date:<br></label>
            <input name="DueDate" class="DueDate" type="date" id="DueDate412"/>
        </div>
        <div class="actions">
            <label for="actions">Actions required to correct and/or prevent this observation:</label>
            <textarea name="actions" id="pa412" rows="6" style="width: 530px;"></textarea>
        </div>
        </div>
        </td>
        </tr>
    </table>
    </div>

Файл css файла виджета аккордеона содержит следующую строку, которая определяет цвет панели аккордеона по умолчанию:

.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:1px solid #d3d3d3;background: #e6e6e6; font-weight:normal;color:#555}

Я знаю, что это должен быть относительно простой JS-код, чтобы активировать эту функциональность, но... Спасибо заранее!

Теги:
colors
accordion

2 ответа

2
Лучший ответ

Вы можете использовать jQuery, чтобы легко добавлять классы к элементам.

Получите элементы радиуса и добавьте событие изменения. Aprox:

 $('input[type=radio][name=NameOfRadioInput]').change(function(){
 if (this.value == 'BLAH') {
        $(#YourAccordionElement).addClass("className1").
    }
    else if (this.value == 'BLEH') {
        $(#YourAccordionElement).addClass("className2").
    }

  }
Поделиться
  • 0
    О, спасибо за быстрый ответ. Как ни странно, у меня была эта идея раньше, проблема в том, что я не знаю, как правильно применять ее из-за уровня знаний JS моего «новичка». Я преобразовал ваши предложения в $('input[type=radio][name=Radio401]').change(function(){ if (this.value == 'Y') { $(.questions).addClass("className1"); } else if (this.value == 'N') { $(.questions).addClass("className2"); } } для вопроса 401, однако я не уверен, как применять класс. смысл, у меня есть около 400 вопросов, каждый со своим идентификатором (радио + идентификатор) ...
  • 0
    Или мы можем привести один пример с вопросом 401, просто чтобы я все понял, пожалуйста
2

Добавьте классы в ваш.css файл, например

.classGreen { 
color: green 
} 

.classRed { 
color: red 
}

а затем пересоедините код js:

if (this.value == 'Y') {
        $(.questions).addClass("classGreen");
}
else if (this.value == 'N') {
        $(.questions).addClass("classRed");
}

Затем вам нужно удалить добавленный стиль, когда вы хотите удалить эти зеленые/красные цвета, с помощью removeClass ("classGreen")/etc... Или используйте toggleClass ("classGreen") вместо addClass/removeClass

Поделиться
  • 0
    Хорошо, это понятно. Тем не менее, цвет фона аккордеонной панели контролируется этой строкой .ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:1px solid #d3d3d3;background: #e6e6e6; font-weight:normal;color:#555} . Если я добавлю classGreen класса ", как он будет взаимодействовать с существующим CSS для виджета?
  • 0
    Нет проблем, в классах CSS есть иерархия, цвет переопределяется без "структурных" проблем
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню