Я не понимаю этот код jquery

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

Я искал немного здесь, на StackOverflow и думаю, что лучшее разрешение кто-то разместил этот код:

function updateStyleSheet(filename) { 
    newstylesheet = "Content/css/" + filename + ".css"; 
    if ($("#dynamic_css").length == 0) { 
     $("head").append("<link>") 
     css = $("head").children(":last"); 
     css.attr({ 
      id: "dynamic_css", 
      rel: "stylesheet", 
      type: "text/css", 
      href: newstylesheet 
     }); 
    } else { 
     $("#dynamic_css").attr("href", newstylesheet); 
    } 
}

Если я понимаю, исправить это должно заменить текущую таблицу стилей моего веб-сайта с новым, получение такой же результат я хочу. У меня есть 2 таблицы стилей; один по имени stylegreen.css, а другой по имени styleblue.css. Где в коде выше я должен изменить, чтобы сделать эту работу, и поместить в html я должен добавить скрипт правильно? И последняя вещь - кнопка, чтобы внести изменения - как это должно быть?

источник

2015-01-03 Merin RV

здесь путь «Content/CSS /» + имя файла + «.css» Вы должны написать „styleblue.css“ без содержания/CSS и т.д., и это собирается обновить ваш css –

Если вы не понимаете ответа, вы должны попросить разъяснения, где был отправлен ответ, или, возможно, изучить основные используемые технологии. –

Это функция, которая добавляет тег ссылки HTML в заголовок, когда он вызывается. Для этого вам необходимо:

1 - Для этого требуется jQuery. Таким образом, вы должны импортировать JQuery библиотеку

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>

2 - Измените путь к вашему CSS файл

newstylesheet = "your/path/" + filename + ".css";

3 - Вызов функции, давая имя файла CSS вы хотите прикрепить

updateStyleSheet("styleblue"); // attach styleblue.css to your page 
updateStyleSheet("stylegreen"); // attach styleblue.css to your page

Полное Пример:

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 
</head> 
<body> 
    <select id="styleSelect"> 
     <option value="styleblue">Blue</option> 
     <option value="stylegreen">Green</option> 
    </select> 

    <script> 
     function updateStyleSheet(filename) { 
     newstylesheet = "path/to/css/" + filename + ".css"; 
     if ($("#dynamic_css").length == 0) { 
      $("head").append("<link>") 
      css = $("head").children(":last"); 
      css.attr({ 
      id: "dynamic_css", 
      rel: "stylesheet", 
      type: "text/css", 
      href: newstylesheet 
      }); 
     } else { 
      $("#dynamic_css").attr("href", newstylesheet); 
     } 
     } 

     // It is a plus. It calls the updateStyleSheet function 
     // giving the select value as an argument when you change the select element 
     $("#styleSelect").change(function() { 
      updateStyleSheet($(this).val()); 
     }); 
    </script> 
</body>

источник

2015-01-03 22:26:18 nanndoj

Спасибо, что код был потрясающим. Как я могу изменить функцию значения вместо двух ссылок, чтобы они могли нажимать на текст, обозначающий синий или зеленый. –

Возможно, вы упростите ситуацию, поскольку у вас есть только 2 таблицы стилей.

Предполагая, что они являются взаимозаменяемыми, вы можете просто добавить идентификатор к существующему тегу ссылки по умолчанию, жестко кодируя его. Если жесткий код непрактично есть и другие способы просто нацелен на правильный существующую ссылку тег

<link id="site_theme" href="path/to/css/styles_green.css" data-color="green">

В JS:

/* bind a click handler to some button */ 
$('#someButtonId').click(function() { 
    /* define link tag as jQ object */ 
    var $link = $('#site_theme'), 
     /* current color stored in data attribute */ 
     currColor = $link.data('color'), 
     /* set new color*/ 
     newColor = currColor === 'green' ? 'blue' : 'green'; 
    /* modify the href for new theme color */ 
    $link.attr('href', function (_, currHref) { 
     return currHref.replace(currColor, newColor); 
     /* store the newColor */ 
    }).data('color', newColor); 
});

Выше предполагается, что цвета в именах файлов CSS-файлах.

Последующие щелчки кнопки будут переключаться между темами

источник

2015-01-03 22:27:31 charlietfl

Я не понимаю этот код jquery

ответ

Смежные вопросы