Как я могу использовать одноуровневые селекторы CSS? - PullRequest
Новая
       19

Как я могу использовать одноуровневые селекторы CSS?

1 голос
/ 13 сентября 2011 
  $('#0show').hide();
  $('#0click').click(function(event) {
     $('#0show').toggle();
     $('#1show').hide();
     $('#2show').hide();
  });    

  $('#1show').hide();
  $('#1click').click(function(event) {
     $('#1show').toggle();
     $('#0show').hide();
     $('#2show').hide();
  });        

  $('#2show').hide();
  $('#2click').click(function(event) {
     $('#2show').toggle();
     $('#0show').hide();
     $('#1show').hide();
  });

Я пытаюсь сделать мой код более пригодным для повторного использования, и я хотел бы использовать одноуровневые селекторы. По сути, я должен сменить дом, потому что все шоу одинаковы, поэтому я бы устроил просто шоу-класс? но как мне использовать эти селекторы в CSS?

html (который мне нужно отредактировать, чтобы использовать в качестве некоторых предлагаемых классов) 

<a class='clicked' href='#' id='0click'>Reveal Image Uploader</a> 
<div id='0show'> 
    <div class='column first'> 
        <div class='fieldWithUpload' id='upload_id_5' style='margin-top: 10px'> 
            <div class='uploadHolder'> 
                <div id='bgUploaderButton'></div> 
                    <span class='uploadProgressbar'></span> 
                </div> 
            </div> 
        </div> 
    </div> 
</div>

1 Ответ

1 голос
/ 13 сентября 2011

Вот простой шаблон для нескольких открытых / закрытых секций. Вам не нужно использовать идентификаторы 

<a class='link' href='javascript://'>Reveal Image Uploader</a> 
<div style="display:none" class="details"> ... </div>

JS: 

$('.link').click(function) {
    $('.details').hide()
    $(this).next('.details').show()
}
...