2013-06-14 2 views
0

Мне нужно выполнить динамическую замену в строке с помощью jQuery. Я читал об использовании подстановочных знаков в селекторах, но я хочу, чтобы это было в строке.Замена динамического содержимого jQuery/javascript

Учитывая этот HTML:

<style type="text/css">@import url('css/another.css');</style> 
<style type="text/css">@import url('css/stylesMQ.css');</style> 

И я эту функцию в JQuery:

function adjustStyle(width) { 
    width = parseInt(width); 
    if (width < 701) { 
     $('style:contains("MQ")').text(function() { 
     return $(this).text().replace("MQ.css", "400MQ.css"); 
     }); 
    } else if ((width >= 701) && (width < 900)) { 
     $('style:contains("MQ")').text(function() { 
     return $(this).text().replace("MQ.css", "800MQ.css"); 
     });   
    } else { 
     $('style:contains("MQ")').text(function() { 
     return $(this).text().replace("MQ.css", "MQ.css"); 
     });   
    } 
} 

Эта функция является частью целой JQuery, что изменяет @imported CSS в зависимости от размера экрана.


ОШИБКА

Это работает, но когда я начинаю играть с размером экрана я получаю что-то вроде:

@import url('css/styles800800800800400400400400400400400400400400MQ.css'); 

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

.replace("styles*MQ.css", "styles400MQ.css"); 

СОВЕТЫ: ​​

  • Я не использую mediaqueries, потому что мой клиент Фред Flinstone, он использует IE7 и не хочет pollyfills, потому что дополнительное время загрузки и потому, что они думают, что они демон.
  • Есть другие @imported CSS на странице
  • Я не знаю весь путь для CSS и папки, только имя (именно по этой причине я хочу сделать замену вместо того, чтобы писать относительное местоположение пути новый CSS.)
  • Я могу изменить имя любого из этих CSS.
+1

это связано с javascript, не специфичным для jquery, вы должны отредактировать тэг –

ответ

4

Вместо .replace("MQ.css", "MQ.css"); попробовать что-то вроде

.replace(/\d*MQ\.css/, "MQ.css"); 
.replace(/\d*MQ\.css/, "400MQ.css"); 
+0

@ Arkana была проблема, исправлено –

+0

Нет, нет, я был неправ !!! Он работает хорошо (моя ошибка тестирования кода). Спасибо :) – Arkana

+0

@downvoter другой! :). похоже, что кто-то сумасшедший ... все-таки не могли бы вы объяснить, почему –

0
$('style:contains("MQ")').text(function() { 
    return $(this).text().split('/')[0]+"/400MQ.css"; 
}); 
+1

. Еще одна, более семантическая опция - добавить класс в (.mq400) и префикс соответствующих стилей в одном файле css с этим классом ('.mq400 p {/ * etc * /}') Преимущество состоит в том, что таким образом нужен только один файл css для загрузки, и изменение будет мгновенным (в отличие от загрузки нового файла css после загрузки страницы и выполнения js). – Ashish

+0

Это работает в этом конкретном случае, но на большом пути (например, '@import url ('folder/css/MQ.css')') он удаляет меня почти весь путь ... – Arkana

0

Я хотел бы использовать

$('style:contains("MQ")').text(function (pos, value) { 
     return value.replace(/styles(400|)MQ\.css/, "styles800MQ.css"); 
}); 

же решение изменения ожидаемого выражения (400, 800, '')