Как применить дисплей: нет; в классе в div - PullRequest
Новая
       14

Как применить дисплей: нет; в классе в div

0 голосов
/ 15 января 2019

Я пытаюсь скрыть некоторые из <div class="form-group"> строк в этой группе строк. Я хотел бы скрыть Boolean 1 и Boolean 3. Могу ли я применить display: none; к полям subrecord-form-fields, чтобы скрыть только некоторые строки? 

<div class="subrecord-form-fields">
      <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__boolean_1_" contextual="resource">Boolean 1</label><div class="col-sm-1 checkbox"><input id="resource_user_defined__boolean_1_" type="checkbox" name="resource[user_defined][boolean_1]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div></div>
      <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__boolean_2_" contextual="resource">Boolean 2</label><div class="col-sm-1 checkbox"><input id="resource_user_defined__boolean_2_" type="checkbox" name="resource[user_defined][boolean_2]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div></div>
      <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__boolean_3_" contextual="resource">Boolean 3</label><div class="col-sm-1 checkbox"><input id="resource_user_defined__boolean_3_" type="checkbox" name="resource[user_defined][boolean_3]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div></div>
      <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__integer_1_" contextual="resource">Integer 1</label><div class="col-sm-9"><input id="resource_user_defined__integer_1_" type="text" value="" name="resource[user_defined][integer_1]" class="form-control"></div></div>

Обновление: извините, я должен был упомянуть, что я не уверен на 100%, что этот список никогда не изменится, поэтому я хотел бы иметь возможность выделять строки по имени, а не только по 2-й строке.

Ответы [ 4 ]

0 голосов
/ 15 января 2019

Если вы хотите вставлять строки, вы можете добиться этого, выполнив это ... 

.subrecord-form-fields > :nth-child(2n -1)
{
    display: none;
}
0 голосов
/ 15 января 2019

Да! С псевдоклассом : nth-child вы можете сделать что-то вроде: 

.subrecord-form-fields div:nth-child(1), .subrecord-form-fields div:nth-child(3)
{
    display: none;
}

Я сделал для вас фрагмент кода о том, как он может выглядеть, теперь вам нужно поиграть с несколькими js, чтобы скрыть или показать их в любое время. 

.subrecord-form-fields div:nth-child(1), .subrecord-form-fields div:nth-child(3)
{
    display: none;
}
<div class="subrecord-form-fields">
  <div class="form-group">
   <label class="col-sm-2 control-label" for="resource_user_defined__boolean_1_" contextual="resource">
    Boolean 1
   </label>
  <div class="col-sm-1 checkbox">
  <input id="resource_user_defined__boolean_1_" type="checkbox" name="resource[user_defined][boolean_1]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="resource_user_defined__boolean_2_" contextual="resource">
    Boolean 2
   </label>
   <div class="col-sm-1 checkbox">
    <input id="resource_user_defined__boolean_2_" type="checkbox" name="resource[user_defined][boolean_2]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox">
   </div>
  </div>
  <div class="form-group">
   <label class="col-sm-2 control-label" for="resource_user_defined__boolean_3_" contextual="resource">
    Boolean 3
   </label>
  <div class="col-sm-1 checkbox">
   <input id="resource_user_defined__boolean_3_" type="checkbox" name="resource[user_defined][boolean_3]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox">
  </div>
 </div>
 <div class="form-group">
  <label class="col-sm-2 control-label" for="resource_user_defined__integer_1_" contextual="resource">
   Integer 1
  </label> 
 <div class="col-sm-9">
  <input id="resource_user_defined__integer_1_" type="text" value="" name="resource[user_defined][integer_1]" class="form-control">
 </div>
</div>
0 голосов
/ 15 января 2019

При этом будут скрыты все метки с атрибутом for, заканчивающимся __boolean_3_ или __boolean_1_, а также любые элементы с идентификаторами, заканчивающимися в этих строках (полезно в случаях, когда они генерируются в случайном порядке). 

[for$="__boolean_3_"],
[for$="__boolean_1_"],
[id$="__boolean_3_"],
[id$="__boolean_1_"] {
  display: none;
}


[for$="__boolean_3_"],
[for$="__boolean_1_"],
[id$="__boolean_3_"],
[id$="__boolean_1_"] {
  display: none;
}
<div class="subrecord-form-fields">
  <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__boolean_1_" contextual="resource">Boolean 1</label>
    <div class="col-sm-1 checkbox"><input id="resource_user_defined__boolean_1_" type="checkbox" name="resource[user_defined][boolean_1]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div>
  </div>
  <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__boolean_2_" contextual="resource">Boolean 2</label>
    <div class="col-sm-1 checkbox"><input id="resource_user_defined__boolean_2_" type="checkbox" name="resource[user_defined][boolean_2]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div>
  </div>
  <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__boolean_3_" contextual="resource">Boolean 3</label>
    <div class="col-sm-1 checkbox"><input id="resource_user_defined__boolean_3_" type="checkbox" name="resource[user_defined][boolean_3]" value="1" label_opts="{:contextual=>&quot;resource&quot;}" col_size="1" controls_class="checkbox"></div>
  </div>
  <div class="form-group"><label class="col-sm-2 control-label" for="resource_user_defined__integer_1_" contextual="resource">Integer 1</label>
    <div class="col-sm-9"><input id="resource_user_defined__integer_1_" type="text" value="" name="resource[user_defined][integer_1]" class="form-control"></div>
  </div>

Очевидно, что если вы знаете их порядок, :nth-child() очень пригодится.
Если вы хотите быть более конкретным (чтобы избежать ложных срабатываний, вы можете использовать префикс .subrecord-form-fields или применять теги (например, label[for$="__boolean_3_"] и т. Д.).

Но на самом деле JS - правильный путь сюда. Если вы хотите повеселиться, посмотрите полный список CSS-селекторов, модификаторов и комбинаторов .

0 голосов
/ 15 января 2019

Например, чтобы скрыть 2-е div, используйте это: 

.subrecord-form-fields :nth-child(2)
{
    display: none;
}
...