Измените идентификатор, но сохраните CSS, связанный со старым идентификатором в jQuery

0

У меня есть базовый css:

#awesome1{
    color: red;
}

и html:

<div id="awesome1"></div>

Я хочу изменить id awesome1 на awesome2 с помощью jQuery, но сохраните css из старого id.

Но когда я печатаю:

jQuery('#awesome1').attr('id', 'awesome2');

Он изменяет div id в DOM, но, конечно, мой div теряет color: red.

Есть ли способ изменить "id in css" или "скопировать все атрибуты" (я не могу предположить, что только color) от старого id до нового?

Обновление, уточнение:

Дело в том, что я меняю идентификатор на другой динамически, основываясь на некоторых данных ajax - я не знаю (в то время, когда я генерирую css), какой id он будет, поэтому я не могу предположить, что он будет awesome2 и сложным -кодировать его, например, css.

Ps Прежде чем публиковать новые ответы, прочитайте, прежде всего, жирный текст. Я знаю методы, когда я мог бы предположить, что будет новым идентификатором и жестким кодом для css, или отказаться от id для классов. Но в моем примере я не могу. И моя проблема похожа на тему: Измените идентификатор, но сохраните css, связанный со старым id в jQuery.

  • 1
    также взгляните на этот github.com/moagrius/copycss
  • 0
    Как правило, следует избегать изменения идентификатора элемента, например чумы, обычно для этого нет веских причин. Для нацеливания на множество различных элементов с помощью css вы должны использовать селектор классов.
Показать ещё 4 комментария
Теги:

6 ответов

1
Лучший ответ

Этот плагин позволит вам скопировать css из одного элемента в другой

https://github.com/moagrius/copycss

Также аналогичный вопрос уже ответил на StackOverflow здесь → Может ли jQuery получить все стили CSS, связанные с элементом?

Поделиться
  • 0
    Спасибо за ссылку. Я надеялся, что для этого мне не понадобится плагин, но, по крайней мере, он работает. Вопрос похож, но не тот же (они хотят скопировать «все CSS», связанные с элементом - поэтому CSS из ID, все классы и другие селекторы). Но я нашел там возможность решить мою проблему. Спасибо за ответ.
2

Как насчет добавления в CSS?

#awesome2{
    color: red;
}

Или вместо использования CSS для ID используйте его в классе, подобном этому

<div id="awesome1" class="something"></div>

.something{
    color: red;
}

Таким образом, вы всегда будете придерживаться того же стиля из класса, но можете использовать любой идентификатор, который вы хотите

Поделиться
  • 0
    Таким образом, я мог бы просто написать awesome2 в html с самого начала. Дело в том, что я меняю id на другой динамически, основываясь на некоторых данных ajax - я не знаю (в момент создания css), каким он будет. И я должен работать с id, а не с классом.
  • 1
    или еще лучше # awesome1, # awesome2 {color: red}
Показать ещё 3 комментария
0

Если все ваши теги id начинаются со слова "awesome", вы можете изменить свой CSS:

[id^=awesome]{
    color: red;
}

Демо-скрипт

Если они просто содержат слово awesome, chante - каретку (^) в звездочку.

Тем не менее, я бы рекомендовал вам сделать шаг назад и подумать, не существует ли лучшего способа сделать то, что вы намерены.

Поделиться
  • 0
    К сожалению, нет. И я не хочу, чтобы все они (awesome1, awesome2, awesome3) имели один и тот же цвет. В любом случае, спасибо за интересный пример CSS 3
0 
<html>
<head>
    <title>test</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
    <style type="text/css">
        div[id^=awesome] {
            color: red;
        }
    </style>

    <script type="text/javascript">
        var something = function () {
            jQuery('#awesome1').attr('id', 'awesome2');
        }
    </script>
</head>
<body>

    <div id="awesome1">this is test</div>


</body>
</html>
Поделиться
  • 0
    Это тот же самый ответ, который @ SW4 дал несколько минут назад, пожалуйста, прочитайте мой комментарий к нему: «(...) И я не хочу, чтобы все они (awesome1, awesome2, awesome3) имели один и тот же цвет».
  • 0
    Обязательно ли использовать CSS на основе идентификаторов, например # awesome2 и т. Д. Можно ли использовать классы CSS?
Показать ещё 1 комментарий
0 
jQuery('#awesome1').attr('id', 'awesome2');
$('#awesome2').css('color', 'red');
Поделиться
  • 0
    Как я выделил в своем вопросе: «<< скопировать все атрибуты >> (я не могу предположить, что это только цвет)»
-1

Существует всего два раза, когда вы должны ассоциировать CSS с идентификатором:

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

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

.awesome {
    color: red;
    /* other stuff that shouldn't change when the ID changes */
}

#awesome1 {
    /* ID-specific CSS for #awesome1 */
}


#awesome2 {
    /* ID-specific CSS for #awesome2 */
}

и этот HTML:

<div id="awesome1" class="awesome"></div>

Теперь, когда вы меняете идентификатор, элемент будет хранить вещи из своего.awesome класса, но измените в соответствии с его идентификатором для вещей, которые должны измениться для этого.

Поделиться
  • 1
    Как я выделил в своем вопросе: «Я не знаю (во время создания css), какой это будет идентификатор, поэтому я не могу предположить, что это будет awesome2, и жестко закодировать его, например, в css»

Ещё вопросы

Сообщество Overcoder
Наверх
Меню