創建具有遞增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

回答

相關問題