Question

如果span包含一个带有选中值的类，我想选择label元素来应用CSS属性。以下是明确的代码：

<li>
    <div class="radio">
        <span class="checked"><input style="position: absolute;left: -9999px;" id="28" type="radio" class="attribute_radio" name="group_4" value="28" checked="checked">
        </span>
    </div>
    <label style="cursor: pointer;display:initial;padding: 1px 7px 5px;border: 1px solid #BFBFBF;" for="28">46-48</label>
</li>
<li>
    <div class="radio" id="uniform-51">
        <span><input style="position: absolute;left: -9999px;" id="51" type="radio" class="attribute_radio" name="group_4" value="51" checked="checked">
        </span>
    </div>
    <label style="cursor: pointer;display:initial;padding: 1px 7px 5px; border: 1px solid #BFBFBF;" for="51">42-44</label>
</li>

所以我想要做的是为第一个标签应用CSS，因为跨度有类＆＃34;检查＆＃34; （第一个李）但不是第二个李的跨度。

Answer 1

而不是

class="checked"

在<input>上有祖先<li>：

<li class="checked">
    <div class="radio">
        <span><input style="position: absolute;left: -9999px;" id="28" type="radio" class="attribute_radio" name="group_4" value="28" checked="checked"></span>
    </div>
    <label style="cursor: pointer;display:initial;padding: 1px 7px 5px;border: 1px solid #BFBFBF;" for="28">46-48</label>
</li>

然后您可以将<span>定位为：

.checked .radio span {//do stuff}

标签如：

.checked label {//do stuff}

Answer 2

如果将标签放在跨距内，则更容易做到，然后在标签前面加上带有检查类的标签。即

.checked label

但是如果您需要将该标签保留在范围之外，那么您可能需要jQuery来帮助您，除非您将类添加到父li。

jQuery中的例子

$('.checked').parent().parent().find('label').css('opacity','0');

Answer 3

您可以将.checked更改为其父级，这将是label的相邻兄弟，因此您可以使用+。

因此，您可以删除span

＆＃13;

$('li').on('click', function(){
    $('li').children('div').removeClass('checked');
    $(this).children('div').addClass('checked');
});

＆＃13;

li .checked + label {
  background: red
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="radio checked">
     <input style="position: absolute;left: -9999px;" id="28" type="radio" class="attribute_radio" name="group_4" value="28" checked="checked">
    </div>
    <label style="cursor: pointer;display:initial;padding: 1px 7px 5px;border: 1px solid #BFBFBF;" for="28">46-48</label>
  </li>

  <li>
    <div class="radio " id="uniform-51">
      <input style="position: absolute;left: -9999px;" id="51" type="radio" class="attribute_radio" name="group_4" value="51" checked="checked">
    </div>
    <label style="cursor: pointer;display:initial;padding: 1px 7px 5px; border: 1px solid #BFBFBF;" for="51">42-44</label>
  </li>
</ul>

＆＃13;

Answer 4

如果您对HTML和CSS的控制很少或没有，使用jQuery可以执行以下操作：

{{ route('imagecache', ['template' => 'x-large', 'filename' => 'image.jpg']) }}

Answer 5

我解决了问题

$('.attribute_radio').click(function(){
    $('.taille label').removeClass('label_selected');
    $(this).parent().parent().siblings('label').addClass('label_selected');

});

谢谢大家

如何根据前一个兄弟的后代的类选择一个元素

5 个答案: