创建具有递增ID

我有递增的每次点击的ID代码，但问题是在CSS的动感风格标签。我在#dummy ID中实现了一种样式，因此当我第一次点击样式显示时，如我在CSS中编写的，但第二，第三，第四等点击则不会显示。原因是递增ID

我想要什么：

我想，还建立在每个新的递增ID的新风格标签中的每个元素之后单击并实现所有的样式呈现#dummy ID。

例如：

在第二次点击

的ID将会增加，因为它应该是ID = “假 - 1”

下一个样式标签应该有的像这样的事情：

<style> 
    #dummy--1 { 
     background-color: bisque; 
    } 
    #dummy--1 H1 { 
     color: blue; 
     font-size: 20px; 
    } 
    #dummy--1 p { 
     color: green; 
     font-size: 15px; 
    } 
</style>

我该如何实现它。

Here is my fiddle。请检查元素或控制台看到递增的ID

更新：

对不起球员，但我不希望使用DIV [ID^=“伪”。我只是想创建一个新的样式标签，如上所述

来源

2017-06-22 user7791702

基于ID的无限自动样式生成器？ oO –

@ F.bernal是的请帮助我 – user7791702

风格对于所有的虚拟div应该是相同的，对吧？ – mikepa88

我会建议你使用一些其他方法（使用像其他人一样推荐的CSS），但如果你真的想尝试手动生成样式，那么你可以生成样式字符串（在示例中使用RegExp和占位符），然后append it tohead标记：

$array = { 
 
    "sections": { 
 
    "H": { 
 
     "name": "dummy", 
 
     "html": "<div id=\"dummy\"><h1>Some Title</h1><p>This is a para</p></div>" 
 
    } 
 
    } 
 
} 
 

 
var defaultStyle = "#dummy--{id} {background-color: bisque;}#dummy--{id} H1 {color: {h1-color};font-size: 20px;}#dummy--{id} p{color: green;font-size: 15px;}" 
 

 
$(function() { 
 
    // counter which holds the counts of click 
 
    var count = -1; 
 
    $('#cm').click(function(event) { 
 
    $htmlData = $array["sections"]["H"]['html']; 
 
    // check the count value for second click 
 
    if (++count > 0) 
 
     // in case of not a first click parse the html and generate a jQuery object 
 
     $htmlData = $($htmlData).attr('id', function(i, v) { 
 
     // update the attrubute value 
 
     return v + '--' + count 
 
     // get back the html content from the DOM object 
 
     })[0].outerHTML 
 
    //$('#content').html($htmlData); 
 
    $($htmlData).appendTo('#content').hide().slideDown(); 
 
    
 
    var generated = defaultStyle.replace(/{id}/gi, count).replace(/{h1-color}/gi, count % 2 ? "red":"yellow"); 
 
    $("<style type='text/css'>" + generated + "</style>").appendTo("head"); 
 
    }); 
 
})

#dummy { 
 
    background-color: bisque; 
 
} 
 
#dummy H1 { 
 
    color: blue; 
 
    font-size: 20px; 
 
} 
 
#dummy p { 
 
    color: green; 
 
    font-size: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="cm">Click me</button> 
 

 
<ul id="content"> 
 
    
 
</ul>

希望这个想法会帮助你。

更新：您还可以尝试使用jQuery css() method管理您的风格。

来源

2017-06-22 11:14:27

在CSS中使用基于属性过滤的样式。每个以“dummy”开头的id将被选中。

div[id^="dummy"] { 
 
    background-color: bisque; 
 
} 
 

 
div[id^="dummy"] h1 { 
 
    color: blue; 
 
    font-size: 20px; 
 
} 
 

 
div[id^="dummy"] p { 
 
    color: green; 
 
    font-size: 15px; 
 
}

<div id="dummy--1"> 
 
    <h1>test</h1> 
 
</div> 
 
<div id="dummy--2"> 
 
    <p>test</p> 
 
</div>

来源

2017-06-22 10:59:23 Gerard

div[id^="dummy"]会选择每一个元素，它的ID开始dummy

div[id^="dummy"]{ 
    background-color: bisque; 
}

Demo

来源

2017-06-22 10:59:36

给他们一个班

<div id="dummy--x" class="dummy"><h1>Some Title</h1><p>This is a para</p></div>

和CSS应用到该类

.dummy { background-color: bisque; } ... etc

与id选择将工作其他的答案，但是这就是类的，不IDS

来源

2017-06-22 11:01:37 mikepa88

我完全同意你的看法。但是，当你回复我时，我曾多次被告知我没有回答这个问题。因此我给出了答案。 :) – Gerard

是的，但如果这个人没有完全理解css瞄准IDS和类的概念，最好是他知道如何正确实现它比没有理由使用奇怪的CSS选择器。 – mikepa88

创建具有递增ID

回答

相关问题