jquery - 如何使用兄弟 CSS 选择器？

Question

  $('#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();
  });

我正在努力使我的代码更可重用，并且我想使用同级选择器。本质上我必须改变我的 dom 因为所有的节目都是一样的，所以我只做一个节目课？但是如何在 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>

Answer 1

这是一个用于多个打开/关闭部分的简单模式。您不需要使用 ID

<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()
}