jquery - 删除最接近的标签样式

Question

当我点击标签时，我有 3 个标签，需要添加背景颜色。并删除其他标签的颜色。该怎么做？

$(document).ready(function() {
  $('.agentBtn').click(function() {
    $(this).css({
      'background': '#2196F3',
      'color': '#fff'
    });
    $(this).closest().find('label').removeAttr('style');
  });
  $('.ownerBtn').click(function() {
    $(this).css({
      'background': '#2196F3',
      'color': '#fff'
    });
    $(this).closest('label').removeAttr('style');
  });
  $('.otherBtn').click(function() {
    $(this).css({
      'background': '#2196F3',
      'color': '#fff'
    });
    $(this).closest().find('label').removeAttr('style');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="btn agentBtn">
  <input type="radio" id="agent" name="advanced-search-beds" checked >Agent
</label>
<label class="btn ownerBtn">
 <input type="radio" id="owner" name="advanced-search-beds">Owner
</label>
<label class="btn otherBtn">
 <input type="radio" id="other" name="advanced-search-beds">Other
</label>

Answer 1

由于您的其他标签是同级标签，因此您可以使用 jQuery 中的 siblings 方法。

$(document).ready(function(){
    $('.btn').click(function(){
        var $this = $(this);
        $this.css({'background':'#2196F3', 'color':'#fff'});
        $this.siblings("label").removeAttr('style');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="btn">
    <input type="radio" id="agent" name="advanced-search-beds" checked>Agent
</label>
<label class="btn">
    <input type="radio" id="owner" name="advanced-search-beds">Owner
</label>
<label class="btn">
    <input type="radio" id="other" name="advanced-search-beds">Other
</label>