Question

关于代码

我有一个代码可以在每次点击时增加ID，但问题在于css。我在#dummy ID中实现了一个样式，所以当我第一次单击我在css中写入的样式显示时，但是在第二次，第三次，第四次等单击时它不会出现。原因是递增ID

我想要的是什么：

我想要在每个元素之后每次点击时创建一个带有新增加ID的新样式标记，并实现#dummy ID中的所有样式。

例如：

第二次点击

id会增加，因为它应该是id =＆＃34; dummy - 1＆＃34;

在那之下，样式标签应该是这样的：

<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 ^ =＆＃34; dummy＆＃34;]。我只是想创建一个新的样式标签，如上所述

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

div[id^="dummy"]将选择ID以dummy

开头的每个元素

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

<强> Demo

Answer 3

给他们一个班级

<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

Answer 4

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

$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管理您的样式。

使用递增ID

4 个答案: