如何使用同級CSS選擇器？

$('#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中使用這些選擇器？如何使用同級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>

來源

2011-09-13 Jason Wade

僅供參考......你不應該以數字開頭的元素的ID。這可能適用於某些瀏覽器，但我認爲這會在以後的道路上給您帶來麻煩。至少，這是一個W3C推薦：http://www.w3.org/TR/html4/types.html –

你能否爲我們提供你的html，thx –

嘗試使用類 –

這裏的多個打開/關閉部分的簡單模式。你並不需要使用的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() 
}

來源

2011-09-13 18:27:54

如何使用同級CSS選擇器？

回答

相關問題