Question

我有一个与jQuery mobile一起使用的输入元素。发生了什么，是用户使用滑块的时间，这会创建一个输入元素，如下所示：

for(var a = 0;a < $(this).val();a++) {
        $("#boxnumber").append('<div data-role="fieldcontain"><label for="boxamount" class="ui-input-text">Enter box ' + (a + 1) + ' number:</label><input type="text" name="boxamount-' + a + '-no" id="boxamount-' + a + '-no" class="ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-a"/></div>')
      }

问题是2倍。首先要找到一种方法来设置盒数量css？这是一个问题的原因是，对于每个值，boxamount名称都会更改。

boxamount-' + 1 + '-no" id="boxamount-' + 1 + '-no, boxamount-' + 2 + '-no" id="boxamount-' + 2 + '-no

等。其次，覆盖jquery ui并创建自己的类。所以我要做的是这样的事情：

#boxnumber input#boxamount- <- The problem. This is dynamic. I can use any 
class that you wish here and specify in the input.

{

    width:25%;
    margin: 0 0 0 10px;
    display: inline-block;
}

如果有人能帮我解决这个问题，我将不胜感激。在css3中有某种野性命令吗？感谢

Answer 1

你能在代码中添加一个类吗？

如果没有，你可以通过jQuery添加它。

$('#boxnumber input').filter(function() {return $(this).attr("id").substr(0,9) == 'boxamount'}).addClass('custom-class');

然后轻松设计它

#boxnumber input.custom-class
{

    width:25%;
    margin: 0 0 0 10px;
    display: inline-block;
}

Answer 2

您只需在输入HTML标记中添加一个类：

<input type="text" 
  name="boxamount-' + a + '-no" 
  id="boxamount-' + a + '-no" 
  class="boxamount ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-a" />

并按照以下方式设置类的样式：

#boxnumber input.boxamount
{
    width:25%;
    margin: 0 0 0 10px;
    display: inline-block;
}

基于动态内容创建CSS样式

2 个答案: