Meteor Blaze 动态模板 CSS 导致元素 ID 重复

问题描述 投票：0回答：1

我得到了一个旧的 Bootstrap 模板以使其动态化，并且我在使用 ::before 和 ::after 选择器的动态 CSS 方面遇到了问题，请检查下面的示例图像

核心问题是，它对于单一用途/类工作得很好，但是当我尝试对动态模板（超过 1）使用相同的 CSS 时，它的行为很奇怪，最初我注意到 ID 是相同的，所以我尝试转换它到类但问题没有解决，然后我意识到这个问题只出现在 ::before 和 ::after 选择器中，所有其他模板类都工作正常，所以我尝试通过唯一文档 ID 的组合动态添加该 CSS，即使我结束了用 JS 来设置动态样式标签，但这似乎是非常hacky的解决方案。

h4, h5, h6,
h1, h2, h3 {margin: 0;}
ul, ol {margin: 0;}
p {margin: 0;}

html, body{
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 100%;
    overflow-x: hidden;
    background: #FFFFFF;
}

#page-wrapper3 .widget-shadow {
    background-color: #fff;
    box-shadow: 0 -1px 3px rgba(0,0,0,0),0 1px 2px rgba(0,0,0,0);
    -webkit-box-shadow: 0 -1px 3px rgba(0,0,0,0),0 1px 2px rgba(0,0,0,0);
    -moz-box-shadow: 0 -1px 3px rgba(0,0,0,0),0 1px 2px rgba(0,0,0,0);
}
#page-wrapper3 .login-top {
    padding: 1.5em;
    border-bottom: 0 solid #DED9D9!important;
    text-align: center;
}

#wrapper {
    width: 100%;
}
#page-wrapper {
    padding:7em 2em 2.5em 12em;
    background-color: #EFF4FA;
}
#page-wrapper2 {
    padding:7em 2em 2.5em 2em;
    background-color: #EFF4FA;
}
#page-wrapper3 {
    padding:4em 2em 2.5em 2em;
    background-color: #FFFFFF;
}

#page-wrapper3 .login-page{
    width: 70%!important;
}

.selecOpc3{
    width: 100%;
    display: block;
    margin: 10px 40px 40px;
}

.selecOpc3 div{
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.selecOpc3 .dRati{
    display: inline-block;
    position: relative;
}

.selecOpc3 .dRati .escala{
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    margin: 25px auto;
}

.selecOpc3 img{
    width: 35px;
}


.textCuest1{
    margin: 10px 0px 0px;
    text-align: left;
}

.rating, .rating1, .escala {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  display: flex;
  justify-content: space-around;
}

.rating input, .rating1 input, .escala input {
  display: none;
}


.escala label {
    display: inline-grid;
    cursor: pointer;
    width: 40px;
    transform: rotate(180deg);
    margin: 5px;
}


/* here is the issue which I had to resolve dynamically */
.escala label[for=escala1]::before {
  content: '1';
  position: relative;
  display: block;
  border: 1px solid;
    border-radius: 50px;
    padding: 7px;
}

.escala label[for=escala2]::before {
  content: '2';
  position: relative;
  display: block;
  border: 1px solid;
    border-radius: 50px;
    padding: 7px;
}

.escala label[for=escala3]::before {
  content: '3';
  position: relative;
  display: block;
  border: 1px solid;
    border-radius: 50px;
    padding: 7px;
}

.escala label[for=escala4]::before {
  content: '4';
  position: relative;
  display: block;
  border: 1px solid;
    border-radius: 50px;
    padding: 7px;
}

.escala label[for=escala5]::before {
  content: '5';
  position: relative;
  display: block;
  border: 1px solid;
    border-radius: 50px;
    padding: 7px;
}

.escala label[for=escala6]::before {
  content: '6';
  position: relative;
  display: block;
  border: 1px solid;
    border-radius: 50px;
    padding: 7px;
}

.escala label[for=escala7]::before {
  content: '7';
  position: relative;
  display: block;
  border: 1px solid;
    border-radius: 50px;
    padding: 7px;
}

.escala label[for=escala8]::before {
  content: '8';
  position: relative;
  display: block;
  border: 1px solid;
    border-radius: 50px;
    padding: 7px;
}

.escala label[for=escala9]::before {
  content: '9';
  position: relative;
  display: block;
  border: 1px solid;
    border-radius: 50px;
    padding: 7px;
}

.escala label[for=escala10]::before {
  content: '10';
  position: relative;
  display: block;
  border: 1px solid;
    border-radius: 50px;
    padding: 7px;
}

.escala label[for=escala1]::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  content: '1';
    width: 40px;
    border: 1px solid #44987b;
    border-radius: 50px;
    padding: 7px;
    background-color: rgb(68 152 123 / 17%);
    color: #44987b;
}

.escala label[for=escala2]::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  content: '2';
    width: 40px;
    border: 1px solid #44987b;
    border-radius: 50px;
    padding: 7px;
    background-color: rgb(68 152 123 / 17%);
    color: #44987b;
}

.escala label[for=escala3]::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  content: '3';
    width: 40px;
    border: 1px solid #44987b;
    border-radius: 50px;
    padding: 7px;
    background-color: rgb(68 152 123 / 17%);
    color: #44987b;
}

.escala label[for=escala4]::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  content: '4';
    width: 40px;
    border: 1px solid #44987b;
    border-radius: 50px;
    padding: 7px;
    background-color: rgb(68 152 123 / 17%);
    color: #44987b;
}

.escala label[for=escala5]::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  content: '5';
    width: 40px;
    border: 1px solid #44987b;
    border-radius: 50px;
    padding: 7px;
    background-color: rgb(68 152 123 / 17%);
    color: #44987b;
}

.escala label[for=escala6]::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  content: '6';
    width: 40px;
    border: 1px solid #44987b;
    border-radius: 50px;
    padding: 7px;
    background-color: rgb(68 152 123 / 17%);
    color: #44987b;
}

.escala label[for=escala7]::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  content: '7';
    width: 40px;
    border: 1px solid #44987b;
    border-radius: 50px;
    padding: 7px;
    background-color: rgb(68 152 123 / 17%);
    color: #44987b;
}

.escala label[for=escala8]::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  content: '8';
    width: 40px;
    border: 1px solid #44987b;
    border-radius: 50px;
    padding: 7px;
    background-color: rgb(68 152 123 / 17%);
    color: #44987b;
}

.escala label[for=escala9]::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  content: '9';
    width: 40px;
    border: 1px solid #44987b;
    border-radius: 50px;
    padding: 7px;
    background-color: rgb(68 152 123 / 17%);
    color: #44987b;
}

.escala label[for=escala10]::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  content: '10';
    width: 40px;
    border: 1px solid #44987b;
    border-radius: 50px;
    padding: 7px;
    background-color: rgb(68 152 123 / 17%);
    color: #44987b;
}


.escala label:hover::after,
.escala label:hover ~ label::after,
.escala input:checked ~ label::after {
  opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="selecOpc3">
    <div class="dRati" id="scale">
        <div class="escala">
            <input type="radio" name="escala" id="escala10" value="10"><label for="escala10"></label>
            <input type="radio" name="escala" id="escala9" value="9"><label for="escala9"></label>
            <input type="radio" name="escala" id="escala8" value="8"><label for="escala8"></label>
            <input type="radio" name="escala" id="escala7" value="7"><label for="escala7"></label>
            <input type="radio" name="escala" id="escala6" value="6"><label for="escala6"></label>
            <input type="radio" name="escala" id="escala5" value="5"><label for="escala5"></label>
            <input type="radio" name="escala" id="escala4" value="4"><label for="escala4"></label>
            <input type="radio" name="escala" id="escala3" value="3"><label for="escala3"></label>
            <input type="radio" name="escala" id="escala2" value="2"><label for="escala2"></label>
            <input type="radio" name="escala" id="escala1" value="1"><label for="escala1"></label>
        </div>
    </div>
</div>

<br />
<hr />
<br />

<div class="selecOpc3">
    <div class="dRati" id="scale">
        <div class="escala">
            <input type="radio" name="escala" id="escala10" value="10"><label for="escala10"></label>
            <input type="radio" name="escala" id="escala9" value="9"><label for="escala9"></label>
            <input type="radio" name="escala" id="escala8" value="8"><label for="escala8"></label>
            <input type="radio" name="escala" id="escala7" value="7"><label for="escala7"></label>
            <input type="radio" name="escala" id="escala6" value="6"><label for="escala6"></label>
            <input type="radio" name="escala" id="escala5" value="5"><label for="escala5"></label>
            <input type="radio" name="escala" id="escala4" value="4"><label for="escala4"></label>
            <input type="radio" name="escala" id="escala3" value="3"><label for="escala3"></label>
            <input type="radio" name="escala" id="escala2" value="2"><label for="escala2"></label>
            <input type="radio" name="escala" id="escala1" value="1"><label for="escala1"></label>
        </div>
    </div>
</div>
</body>
</html>

我添加了示例模板代码（从此处的大模板中提取）https://github.com/raza2022/dynamic-css-sample

现场演示在这里https://dynamic-css.meteorapp.com/

您可以在用户选择第二个问题时进行测试，仅应用第一个选定的 CSS（我希望两者独立运行），因为我还有其他类型（表情符号/星星），并且使用 hacky 解决方案是 https ://dynamic-css.meteorapp.com/v1

javascript css meteor meteor-blaze
1个回答
0
投票

在我看来，这里有两个问题，第一个问题是 id 必须是唯一的，特别是在这种情况下，如果它不是唯一的，所有带有 

for='escala10'
的标签将代表带有 
id='escala10'
的输入（如here所述），但由于有两个
id='escala10'
，因此它仅代表第一个。我能想到的最简单的修复方法是使用 
nth-last-of-type()
伪类：

...
    .escala label:nth-last-of-type(1)::before {
      content: "1";
    }

    .escala label:nth-last-of-type(2)::before {
      content: "2";
    }
...

第二个问题是您对所有输入使用相同的名称，在第一部分中您使用了

name='escala'
，并且在第二部分中做了同样的事情，这将导致只能选择一个无线电输入的情况整个部分（据我了解，它应该是每个部分一个无线电输入，而不是每个部分一个无线电）。要解决这个问题，您可以在每个部分使用不同的名称：

h4,
h5,
h6,
h1,
h2,
h3 {
  margin: 0;
}
ul,
ol {
  margin: 0;
}
p {
  margin: 0;
}

html,
body {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 100%;
  overflow-x: hidden;
  background: #ffffff;
}

#page-wrapper3 .widget-shadow {
  background-color: #fff;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0), 0 1px 2px rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0), 0 1px 2px rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0), 0 1px 2px rgba(0, 0, 0, 0);
}
#page-wrapper3 .login-top {
  padding: 1.5em;
  border-bottom: 0 solid #ded9d9 !important;
  text-align: center;
}

#wrapper {
  width: 100%;
}
#page-wrapper {
  padding: 7em 2em 2.5em 12em;
  background-color: #eff4fa;
}
#page-wrapper2 {
  padding: 7em 2em 2.5em 2em;
  background-color: #eff4fa;
}
#page-wrapper3 {
  padding: 4em 2em 2.5em 2em;
  background-color: #ffffff;
}

#page-wrapper3 .login-page {
  width: 70% !important;
}

.selecOpc3 {
  width: 100%;
  display: block;
  margin: 10px 40px 40px;
}

.selecOpc3 div {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.selecOpc3 .dRati {
  display: inline-block;
  position: relative;
}

.selecOpc3 .dRati .escala {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  margin: 25px auto;
}

.selecOpc3 img {
  width: 35px;
}

.textCuest1 {
  margin: 10px 0px 0px;
  text-align: left;
}

.rating,
.rating1,
.escala {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
  display: flex;
  justify-content: space-around;
}

.rating input,
.rating1 input,
.escala input {
  display: none;
}

.escala label {
  display: inline-grid;
  cursor: pointer;
  width: 40px;
  transform: rotate(180deg);
  margin: 5px;
}

.escala label::before {
  position: relative;
  display: block;
  border: 1px solid;
  border-radius: 50px;
  padding: 7px;
}

.escala label::after {
  position: absolute;
  top: 0px;
  opacity: 0;
  transition: 0.5s;
  width: 40px;
  border: 1px solid #44987b;
  border-radius: 50px;
  padding: 7px;
  background-color: rgb(68 152 123 / 17%);
  color: #44987b;
}

/* here is the issue which I had to resolve dynamically */
.escala label:nth-last-of-type(1)::before {
  content: "1";
}

.escala label:nth-last-of-type(2)::before {
  content: "2";
}

.escala label:nth-last-of-type(3)::before {
  content: "3";
}

.escala label:nth-last-of-type(4)::before {
  content: "4";
}

.escala label:nth-last-of-type(5)::before {
  content: "5";
}

.escala label:nth-last-of-type(6)::before {
  content: "6";
}

.escala label:nth-last-of-type(7)::before {
  content: "7";
}

.escala label:nth-last-of-type(8)::before {
  content: "8";
}

.escala label:nth-last-of-type(9)::before {
  content: "9";
}

.escala label:nth-last-of-type(10)::before {
  content: "10";
}

.escala label:nth-last-of-type(1)::after {
  content: "1";
}

.escala label:nth-last-of-type(2)::after {
  content: "2";
}

.escala label:nth-last-of-type(3)::after {
  content: "3";
}

.escala label:nth-last-of-type(4)::after {
  content: "4";
}

.escala label:nth-last-of-type(5)::after {
  content: "5";
}

.escala label:nth-last-of-type(6)::after {
  content: "6";
}

.escala label:nth-last-of-type(7)::after {
  content: "7";
}

.escala label:nth-last-of-type(8)::after {
  content: "8";
}

.escala label:nth-last-of-type(9)::after {
  content: "9";
}

.escala label:nth-last-of-type(10)::after {
  content: "10";
}

.escala label:hover::after,
.escala label:hover ~ label::after,
.escala input:checked ~ label::after {
  opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="selecOpc3">
    <div class="dRati" id="scale">
        <div class="escala">
            <input type="radio" name="escala1" id="escala1-10" value="10"><label for="escala1-10"></label>
            <input type="radio" name="escala1" id="escala1-9" value="9"><label for="escala1-9"></label>
            <input type="radio" name="escala1" id="escala1-8" value="8"><label for="escala1-8"></label>
            <input type="radio" name="escala1" id="escala1-7" value="7"><label for="escala1-7"></label>
            <input type="radio" name="escala1" id="escala1-6" value="6"><label for="escala1-6"></label>
            <input type="radio" name="escala1" id="escala1-5" value="5"><label for="escala1-5"></label>
            <input type="radio" name="escala1" id="escala1-4" value="4"><label for="escala1-4"></label>
            <input type="radio" name="escala1" id="escala1-3" value="3"><label for="escala1-3"></label>
            <input type="radio" name="escala1" id="escala1-2" value="2"><label for="escala1-2"></label>
            <input type="radio" name="escala1" id="escala1-1" value="1"><label for="escala1-1"></label>
        </div>
    </div>
</div>

<br />
<hr />
<br />

<div class="selecOpc3">
    <div class="dRati" id="scale">
        <div class="escala">
            <input type="radio" name="escala2" id="escala2-10" value="10"><label for="escala2-10"></label>
            <input type="radio" name="escala2" id="escala2-9" value="9"><label for="escala2-9"></label>
            <input type="radio" name="escala2" id="escala2-8" value="8"><label for="escala2-8"></label>
            <input type="radio" name="escala2" id="escala2-7" value="7"><label for="escala2-7"></label>
            <input type="radio" name="escala2" id="escala2-6" value="6"><label for="escala2-6"></label>
            <input type="radio" name="escala2" id="escala2-5" value="5"><label for="escala2-5"></label>
            <input type="radio" name="escala2" id="escala2-4" value="4"><label for="escala2-4"></label>
            <input type="radio" name="escala2" id="escala2-3" value="3"><label for="escala2-3"></label>
            <input type="radio" name="escala2" id="escala2-2" value="2"><label for="escala2-2"></label>
            <input type="radio" name="escala2" id="escala2-1" value="1"><label for="escala2-1"></label>
        </div>
    </div>
</div>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.