У меня есть элемент ввода, который я использую с 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 какая-то дикая команда? Благодарность

0
bollo 27 Авг 2011 в 17:45

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;
}
2
William Niu 27 Авг 2011 в 14:30

Можете ли вы добавить класс в код?

Если нет, вы можете добавить его через 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;
}
3
mreq 27 Авг 2011 в 13:58