Question

我有一些输入字段，其id号会动态更改。

例如，下面的代码显示了一个“id="field14”的输入字段。 id中的单词（ field ）不会更改，但（ number ）会动态更改。因此它可能是field14，field13或field20等，并且数字没有限制。

<input type="text" name="field[14]" id="field14" value="" size="30" style="height: 24px;">

我正在使用以下代码来设置输入字段的样式：

document.getElementById("field14").style.height = "24px";

注意，应用程序的PHP代码是编码的＆amp;我正在使用smarty模板进行编辑。

模板中的输入代码如下所示：{$field.input}因此，当我检查实时页面上的元素时，它会显示输入的上述代码以及动态编号。

我想要一种方法，允许我使用单词（ field ）和结束对开始的页面的任何输入字段进行样式设置动态（数字）。有什么建议吗？

Answer 1

对于纯CSS方法，我会检查name，因此您应该只查找属性以field[开头并以右括号]结尾的输入元素。< / p>

e.g。

input[name^="field["][name$="]"] {
   ...
}

从您发布的代码中，您可以合理地假设括号[]中包含数字索引的所有元素的名称也与该id的动态索引相同。

否则，您可能会编写一组更复杂的选择器，以id开头并以数字field

结尾寻找[0..9]

e.g。

input[id^="field"][id$="0"],
input[id^="field"][id$="1"],
input[id^="field"][id$="2"],
input[id^="field"][id$="3"],
input[id^="field"][id$="4"],
input[id^="field"][id$="5"],
input[id^="field"][id$="6"],
input[id^="field"][id$="7"],
input[id^="field"][id$="8"],
input[id^="field"][id$="9"] {
   ...
}

甚至将这两种方法结合起来

input[name^="field["][name$="]"][id$="0"],
input[name^="field["][name$="]"][id$="1"],
...
input[name^="field["][name$="]"][id$="9"] {
   ...
}

Answer 2

您可以使用属性选择器：

input[id^=field] {
    /* Styles */
}

它将匹配input属性以＆＃34;字段＆＃34;开头的所有id个元素。在＆＃34; field＆＃34;之间使用一些分隔符并且这个数字可能更好，以防止匹配像＆＃34; fieldone＆＃34;。

＆＃13;

input[id^=field] {
  background: red;
}

＆＃13;

<input id="field1" />
<input id="field2" />
<input id="field3" />
<input id="field15" />
<input id="field99" />

＆＃13;

Answer 3

我强烈建议使用class属性：

<强> HTML

<input type="text" class="fields" name="field[14]" id="field14" value="" size="30" style="height: 24px;">

<强> CSS

.fields {
  /*style*/
}

Answer 4

我想要一种方法，允许我设置页面的任何输入字段的样式从单词（字段）开始，以动态（数字）结束。任何建议好吗？

这是一个非常特定的问题，希望我们能够确定id以“field”开头并以动态数字结尾的事实。恕我直言这个解决方案完全按照要求使用CSS回答您的问题，而且它不需要您更改HTML或添加类属性（尽管这会更好）。

此CSS代码将找到任何<input>标记，其id以“field”开头并以数字结尾。它也将排除以“字段”开头但不以数字结尾的那些。

input[id^='field'][id$='0'],input[id^='field'][id$='1'],input[id^='field'][id$='2'],input[id^='field'][id$='3'],input[id^='field'][id$='4'],input[id^='field'][id$='5'],input[id^='field'][id$='6'],input[id^='field'][id$='7'],input[id^='field'][id$='8'],input[id^='field'][id$='9']
{
    // styling code
}

演示代码：http://jsfiddle.net/Drakes/7wpnL/671/

Answer 5

如果您需要 JS方法：

http://codepen.io/knitevision1/pen/LEaXxW

var num = 2;
document.getElementById("input" + num).style.backgroundColor = "blue";

如果我说得对，你需要所有新的input看起来有点独特或者什么。

你可以考虑获得一些当前呈现的inputs，然后获取最后一个，然后根据你想要的样子附加你的风格。

Answer 6

使用jquery：

    var inputs = [];
    function getFields(){
        $('input').each(function() {
            if($(this).attr('id').substring(0,5)=='field'){
                inputs.push($(this));
            }
        });
    }

你可以修改“each”循环中的每个输入，或者你可以使用“inputs”变量。

Answer 7

演示：http://jsbin.com/kubaku/1/edit?html,js,output

<强> JS

var inputs = document.getElementsByTagName('input');
var ID = 'field';
var i;

for(i = 0; i < inputs.length; i++) {
  var input = inputs[i];
  var regex = new RegExp("^" + ID);

  if(regex.test(input.id)) {
    input.style.border = '1px solid #c00';
  }

}

使用getElementById为动态ID设置输入字段

7 个答案: