Не могу установить CSS с помощью переменной - jquery

Question

Я пытаюсь динамически установить CSS с переменными, которые я извлекаю из того, что пользователь вводит в текстовое поле.

Это строка кода:

$(get_elem_hierarchy()).css($(this).data('theCss').theProp, $(this).data('theCss').theVal);

Все отлично работает. И свойство css, и значение css корректно отслеживаются на консоли, но по какой-либо причине он не устанавливает его. Если я жестко запрограммирован, он работает нормально.

Я пробовал также заключать их в кавычки, и это тоже не работает, так что проблема не в этом.

Я что-то упустил? Я просмотрел все и не могу найти ничего, что хотя бы отдаленно приближалось к обсуждению этого вопроса, так что, возможно, я поступаю неправильно.

Любая помощь будет принята с благодарностью.

Answer 1

Есть ли конкретная причина, по которой вы используете .data ()? По данным сайта jQuery -

jQuery.data (эль)

Возвращает уникальный идентификатор для элемента.

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

Я настроил пример того, как вы можете ввести имя и значение css в 2 поля ввода и затем применить их к div, чтобы убедиться, что вы можете установить CSS с помощью переменных.

Вы можете редактировать и играть с примером здесь .

Как видите, он использует команду jQuery.val (), чтобы получить текст из каждого текстового поля и назначить каждый переменной. Это то, что вы собирались сделать?

EDIT:

Модифицированный пример здесь

, который использует текстовую область для ввода и позволяет указывать несколько атрибутов CSS. Это работает, потому что jQuery.css () может принимать объект в качестве параметра, поэтому мы создаем объект со свойствами и их соответствующими значениями на основе значения textarea, а затем передаем этот объект в команду jQuery.css (). Просто укажите атрибуты в текстовой области, как в тегах стиля CSS, т.е.

background-color: red; height: 500px; width: 300px; 
font-size: 20px; color: white; 

и все будет применяться к <div> с id="mydiv"

Код jQuery здесь -

$(function() {

    $('#mybutton').click(function(e) {

    var cssObject = {},
        cssName = null,
        cssValue = null;

    var cssAttributeString = $('#value').val();
    var cssAttributeArray = cssAttributeString.split(";");

    for (var i = 0 ; i < cssAttributeArray.length ; i++){
        cssName = $.trim(cssAttributeArray[i].substring(0,cssAttributeArray[i].indexOf(":")));
        cssValue = $.trim(cssAttributeArray[i].substring(cssAttributeArray[i].indexOf(":") + 1, cssAttributeArray[i].length)); 
        cssObject[cssName] = cssValue;    
    }

    $('#mydiv').css(cssObject);

    });

});