如何根據選中的輸入框在相鄰的div中選擇div

給定下面的代碼段，是否有辦法編寫一個CSS選擇器，該選擇器的目標是div的class="item_text"，前提條件是複選框被選中？如何根據選中的輸入框在相鄰的div中選擇div

<div class="row"> 
 
    <div class="col-xs-1"> 
 
    <input name="item_checkbox" type="checkbox" /> 
 
    </div> 
 

 
    <div class="col-xs-11"> 
 
    <div class="item_text" contenteditable="true"> 
 
     To rearrange your list, drag and drop items 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-04 MetaKnight

否; CSS不能（當前）向後看。你必須讓複選框無論是以前的兄弟，或者div的祖先以前的兄弟，所以你可以使用'+'或'〜' – Blazemonger

謝謝你，把你的意見和它的工作就像一個魅力。 – MetaKnight

這是唯一可能與jQuery/JavaScript作爲CSS選擇器不能向上遍歷（從子到父）。

來源

2017-04-04 14:12:36

正如評論中所述，由於CSS規則無法遍歷DOM，因此無法單獨在CSS中執行此操作。

正如您使用jQuery標記問題所示，您可以在複選框狀態發生更改時使用它來影響所需的元素。試試這個：

$('.row :checkbox').change(function() { 
 
    $(this).closest('.row').find('.item_text').toggleClass('foo', this.checked); 
 
});

.foo { border: 1px solid #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-xs-1"> 
 
    <input name="item_checkbox" type="checkbox" /> 
 
    </div> 
 

 
    <div class="col-xs-11"> 
 
    <div class="item_text" contenteditable="true"> 
 
     To rearrange your list, drag and drop items 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-04 14:18:43

這是可能的。我只是重新安排了DOM稍微加入一些CSS：

input[name=item_checkbox]:checked + div.item_text { 
 
    display:none; 
 
}

<div class="row"> 
 

 
    <div class="col-xs-11"> 
 
    <input name="item_checkbox" type="checkbox" /> 
 
    <div class="item_text" contenteditable="true"> 
 
     To rearrange your list, drag and drop items 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-04-04 14:19:53 Neil

如何根據選中的輸入框在相鄰的div中選擇div

回答

相關問題