删除最接近的标签样式

我有3个标签，当我点击标签bg颜色需要添加和颜色删除其他labels.how要做到这一点？删除最接近的标签样式

$(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>

来源

2017-02-24 krish

由于您的其他标签是兄弟姐妹，你可以使用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>

来源

2017-02-24 13:37:37 sniels

你不应该使用$(this).closest('label').removeAttr('style');因为茜应用到 “点击” 之一。你需要将它移除到所有标签，不包括点击标签。例如：

$(this).css({'background':'#2196F3', 'color':'#fff'}); 
$('label').not(this).removeAttr('style');

看看我的例子：https://jsfiddle.net/zLsnatck/

来源

2017-02-24 13:38:20 TriForce

我有同样的想法，但我认为使用'closest'或'siblings'比较好，因为很可能会在可能发生碰撞的形式，不同的标签。 – sniels

是的，兄弟姐妹也可以选择使用，但他的代码非常基本，他希望删除所有其他标签css，不仅是最接近的，反正在另一个标签不存在问题，他应该只添加父类目标 – TriForce

像这样的事情？

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <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> 
 
</div>

来源

2017-02-24 13:38:43

删除最接近的标签样式

回答

相关问题