Question

我想在下一个元素上应用一些设计。但我的问题是我收到了这个错误：

Error: Syntax error, unrecognized expression: [object Object] > label

这是我的选择：

浏览

<ul class="list-unstyled">
    <li>
        <input type="radio" id="cat-1" class="category_select" name="category_type" data-category-type="1" value="all_product" checked="checked" />
        <label for="cat-1"><span></span>All</label>     
    </li>
    <li>
        <input type="radio" id="cat-2" class="category_select" name="category_type" data-category-type="2" value="japanese_tea" />
        <label for="cat-2"><span></span>Japanese Tea</label>        
    </li>
    <li>
        <input type="radio" id="cat-3" class="category_select" name="category_type" data-category-type="3" value="black_vinegar" />
        <label for="cat-3"><span></span>Black Vinegar</label>       
    </li>
    <li>
        <input type="radio" id="cat-4" class="category_select" name="category_type" data-category-type="4" value="food" />
        <label for="cat-4"><span></span>Food</label>        
    </li>
    <li>
        <input type="radio" id="cat-5" class="category_select" name="category_type" data-category-type="5" value="cosmetic_health" />
        <label for="cat-5"><span></span>Cosmetic / Health</label>       
    </li>
    <li>
        <input type="radio" id="cat-6" class="category_select" name="category_type" date-category-type="6" value="others" />
        <label for="cat-6"><span></span>Others</label>      
    </li>
</ul>

这是我的JS：

$('.category_select').on('change', function() {

    var cat = $(this);
    var category_type = $(this).data('category-type');

    $(cat + ' > label').css({'color':'red'}); //wont apply some css why?

});

你能帮我解决这个问题吗？

Answer 1

您需要使用.next()遍历方法来获取元素的下一个兄弟

在您的代码中cat是一个jQuery对象，所以当在字符串连接中使用时，您的选择器变为[object Object] > label

＆＃13;

$('.category_select').on('change', function() {

  var cat = $(this);
  var category_type = $(this).data('category-type');

  cat.next('label').css({
    'color': 'red'
  }); //wont apply some css why?

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-unstyled">
  <li>
    <input type="radio" id="cat-1" class="category_select" name="category_type" data-category-type="1" value="all_product" checked="checked" />
    <label for="cat-1"><span></span>All</label>
  </li>
  <li>
    <input type="radio" id="cat-2" class="category_select" name="category_type" data-category-type="2" value="japanese_tea" />
    <label for="cat-2"><span></span>Japanese Tea</label>
  </li>
  <li>
    <input type="radio" id="cat-3" class="category_select" name="category_type" data-category-type="3" value="black_vinegar" />
    <label for="cat-3"><span></span>Black Vinegar</label>
  </li>
  <li>
    <input type="radio" id="cat-4" class="category_select" name="category_type" data-category-type="4" value="food" />
    <label for="cat-4"><span></span>Food</label>
  </li>
  <li>
    <input type="radio" id="cat-5" class="category_select" name="category_type" data-category-type="5" value="cosmetic_health" />
    <label for="cat-5"><span></span>Cosmetic / Health</label>
  </li>
  <li>
    <input type="radio" id="cat-6" class="category_select" name="category_type" date-category-type="6" value="others" />
    <label for="cat-6"><span></span>Others</label>
  </li>
</ul>

＆＃13;

Answer 2

您可以使用所选输入框的label属性直接选择下一个id

 $('.category_select').on('change', function() {
        var cat = this.id;
        var category_type = $(this).data('category-type');
       $("label").css({'color':'black'}) // Remove red color from previously selected item
        $("label[for='"+cat+"']").css({'color':'red'}); // Apply red color on selected item

    });

JSFIDDLE EXAMPLE

Answer 3

你需要使用.next（）选择器来选择下一个元素，而不是$（cat +'＆gt; label'）

$('.category_select').on('change', function() {

    var cat = $(this);
    var category_type = $(this).data('category-type');

    cat.next('label').css({'color':'red'}); //syntax for selecting next in js

});

希望这能帮到你吗？

如何使用jquery选择下一个元素？

3 个答案: