Материализация CSS - динамически изменить фон и цвет текста раскрывающегося списка «Параметры выбора» в jQuery? - PullRequest
Новая
       10

Материализация CSS - динамически изменить фон и цвет текста раскрывающегося списка «Параметры выбора» в jQuery?

0 голосов
/ 17 февраля 2019

Я использую Материализацию с Метеором.Я просто пытаюсь изменить фон и цвет текста значений параметров из поля выбора в материализации, чтобы использовать мои разные темы.Я могу динамически изменять большинство других элементов, но пока это настоящая боль.Ничто из того, что я пробовал, не сработало.

Я пытался использовать включенные цвета класса помощника на option без изменений.

Я пытался $(".dropdown-content>li>a").css("color", themeColor); просто чтобы посмотреть,цвет изменится (предлагается на другой ответ), и все равно без изменений.

Я использую шаблонизатор Blaze в метеоре и пакет Materialize из атмосферы.

Любая помощь очень ценится.

Ответы [ 2 ]

0 голосов
/ 17 февраля 2019

Может быть, вы использовали тег !important в вашей CSS, который переопределяет значение.Или, возможно, ваш HTML еще не был полностью загружен.Если вы используете браузер Chrome, вы можете проверить элемент, чтобы увидеть, не переопределен ли стиль, если это не проблема, тогда вы должны попытаться вручную передать $(".dropdown-content>li>a").css("color", themeColor); в вашей консоли.Если цвет изменится, это будет означать, что у вас проблема с синхронизацией.

0 голосов
/ 17 февраля 2019

Динамическое изменение цвета

Существует две возможности, во-первых, материализованные компоненты не были полностью инициализированы, прежде чем вы попытаетесь динамически изменить их CSS (и, следовательно, этого не происходит).А во-вторых, ваши селекторы недостаточно конкретны.

Приведенный ниже код действует так, как вы хотите. 

$( document ).ready(function() {
  $(".dropdown-content.select-dropdown > li span").css("color", "red");
});

NB. Задумывались ли вы о применении одного класса темы ктело вашего документа?Это сохранит много динамических вызовов jquery после загрузки страницы.См. Пример ниже.

Демо 

// Initialise select
$(document).ready(function() {
  $('select').formSelect();
});

// Wait for page to be ready before applying CSS changes
$( document ).ready(function() {
  $(".dropdown-content.select-dropdown > li span").css("color", "red");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="input-field col s12">
  <select>
    <option value="" selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <label>Materialize Select</label>
</div>

Опция темы

Это был бы гораздо лучший подход, используя селекторы CSS и затем просто применяя один класс к телустраницы (или некоторого другого высокоуровневого родительского элемента).

Это позволит полностью избежать проблемы инициализации. 

// Initialise select
$(document).ready(function() {
  $('select').formSelect();
});


// Change themes dynamically
$("#blue").click( function() {
  $("body").removeClass("redTheme").addClass("blueTheme");
})
$("#red").click( function() {
  $("body").removeClass("blueTheme").addClass("redTheme");
})
.blueTheme .dropdown-content.select-dropdown > li span {
  color: blue;
}

.redTheme .dropdown-content.select-dropdown > li span {
  color: red;
}


hr {
  margin-top: 20px;
  margin-bottom: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<body>
Select theme:
<button id="red">Red Theme</button> 
<button id="blue">Blue Theme</button>
<hr>

<div class="input-field col s12">
  <select>
    <option value="" selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
  <label>Materialize Select</label>
</div>

</body>
...