Я пытаюсь создать свою собственную тему для Tumblr (на самом деле пытаюсь создать какое-то портфолио с блогом на его основе) и столкнулся с проблемой:

Я использую jQuery и хочу вставить в этот скрипт переменные Tumblr, чтобы иметь возможность изменять цвета на панели «Внешний вид» на сайте Tumblr. Но похоже, что это не работает. Может быть, есть что-то особенное в синтаксисе, которое я не рассматриваю. Вот сценарий со вставленными переменными.

<script>
    $("#Home").hover(
        function(over){
            $("#Home").css('background-color','{color:Home-hover}');
            $("#title").css('color','{color:Home-hover}');
        },
        function(out){
            $("#Home").css('background-color','{color:Buttons}');
            $("#title").css('color','{color:Buttons}');
        }
    );
</script>

Заранее спасибо.

1
Dima 3 Фев 2013 в 02:47

1 ответ

Лучший ответ

Когда вы помещаете {color:buttons} в одинарные кавычки, вы помещаете именно эти символы в CSS. Вы хотели получить доступ к значению, хранящемуся в объекте на странице? Может быть, есть объект color с ключом Buttons, который вы можете передать обработчику css jQuery, например:

$("#title").css('color',document.color.Buttons)

Или же:

 $("#title").css('color',document.color["Buttons"])

То есть, если эти переменные Tumblr существуют в глобальной области документа. Если они созданы внутри замыкания, такого как (function() { ... }), то вы не сможете получить к ним доступ за пределами замыкания.

Редактировать

Истинная сила jQuery заключается в том, что вы можете получать доступ и управлять практически всем на странице, включая метаданные. Поиграйте с моим jsfiddle здесь. Основная идея состоит в том, чтобы сохранить вашу переменную {color:Buttons} в переменной javascript, а затем настроить CSS на ее основе.

Внутри $(document).ready()

$("#Home").on("mouseenter", function() {
   var metaColorButtons = $("meta[name='color:Buttons']").prop("content");
   $("#title").css('color', metaColorButtons);
 });

$("#Home").on("mouseleave", function() {
  $("#title").css('color', '#000');
});
3
Austin Mullins 3 Фев 2013 в 03:55
Прошу прощения, но я в некотором роде новичок в веб-разработке и, возможно, немного глуп со своими вопросами и разъяснениями, но, пожалуйста, расскажите мне об этом. Моя цель состояла в том, чтобы изменить цвет заголовка вместе с кнопкой меню при наведении курсора на кнопку. Я нашел способ сделать это только с помощью CSS, но затем мне пришлось поместить оба элемента в один и тот же DIV, что мне кажется невозможным. Поэтому я решил использовать jQuery (вообще-то впервые). Я пытаюсь передать jQuery переменные Tumblr, которые являются {color: Buttons}, {color: ...} и так далее. Эти переменные также загружаются в css.
 – 
Dima
3 Фев 2013 в 03:12
Без проблем. Можете ли вы показать нам пример переменной, к которой вы пытаетесь получить доступ в Tumblr?
 – 
Austin Mullins
3 Фев 2013 в 03:16
Ну, вот и весь мой код. Может быть, отсюда вы лучше поймете, что мне нужно и как этого добиться. Спасибо за помощь. ССЫЛКА
 – 
Dima
3 Фев 2013 в 03:27
Буду очень признателен за вашу помощь. Заранее большое спасибо. Вот ссылка еще раз - ССЫЛКА
 – 
Dima
3 Фев 2013 в 03:58
Да, большое спасибо. Увидел это после того, как разместил свое сообщение. Это кажется полезным, мне просто нужно изучить основы JS, чтобы начать понимать принципы его работы. Постараюсь поиграться с вашим примером и разобраться. Кстати, может быть, вы могли бы предложить какой-нибудь альтернативный способ достижения такого же эффекта только с помощью CSS? Мне сейчас кажется, что JavaScript слишком много. Я обязательно потрачу время на изучение его основ, но сейчас мне не хватает времени. Еще раз большое спасибо.
 – 
Dima
3 Фев 2013 в 04:11