Jquery在div中显示和隐藏边框答案

【问题标题】：Jquery show and hide border in divsJquery在div中显示和隐藏边框
【发布时间】：2015-02-20 01:38:36
【问题描述】：

当我单击一个并在每次单击时隐藏另一个时，我尝试在 div 中显示边框

CSS 代码

 <style>
  .active
     {
     border:4px solid red;
     }
 </style>

JQUERY 代码

<script>
function remove(idimg)
{   
    jQuery(".img_f"+idimg).click(function() 
    {   
        jQuery(this).removeClass('active')  
        jQuery(this).addClass('active');            
    }); 
}
</script>

HTML 代码

<div class="img_f1"></div>
<script>remove('1')</script>
<div class="img_f2"></div>
<script>remove('2')</script>
<div class="img_f3"></div>
<script>remove('3')</script>
<div class="img_f4"></div>
<script>remove('4')</script>
<div class="img_f5"></div>
<script>remove('5')</script>

问题是当我点击第一个元素时显示红色边框，当我点击第二个元素时也显示红色边框但直到元素边框才隐藏

我不知道如何才能修复并最终工作

致以最诚挚的问候，感谢您的帮助

【问题讨论】：

标签： jquery addclass

【解决方案1】：

这是因为您要从您将要添加到的同一项目中删除该类...

试试这个：

<script>
function remove(idimg)
{   
    jQuery(".img_f"+idimg).click(function() 
    {   
        jQuery('[class^="img_"]').removeClass('active')  
        jQuery(this).addClass('active');            
    }); 
}
</script>

【讨论】：

【解决方案2】：

您不想从当前元素中删除active 类，而是希望从之前的活动元素中删除它。所以应该是：

function remove(idimg)
{   
    jQuery(".img_f"+idimg).click(function() 
    {   
        jQuery('.active').removeClass('active');
        jQuery(this).addClass('active');            
    }); 
}

顺便说一句，重复调用remove() 是一个糟糕的设计。给你所有的元素一个 same 类，然后只做一次：

jQuery(document).ready(function() {
  jQuery('.img_f').click(function() {
    jQuery('.active').removeClass('active');
    jQuery(this).addClass('active');
  });
});

.active {
  border: 4px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img_f">1</div>
<div class="img_f">2</div>
<div class="img_f">3</div>
<div class="img_f">4</div>
<div class="img_f">5</div>

【讨论】：

..except "('.img_f')" 与他的 html 中的任何内容都不匹配 :(
你想要的 ('[class^="img_f"]')
我的意思是给他们上同样的课。我已经澄清了答案。
@Carlos Torres 这是更好的方法

【解决方案3】：

我认为这应该可行

<script>
        function remove(idimg)
        {
            jQuery(".img_f"+idimg).click(function()
            {
                jQuery('div').removeClass('active')
                jQuery(this).addClass('active');
            });
        }
</script>

你可以像这样更具体地做到这一点

jQuery('[class*=img_f]').removeClass('active');

或

jQuery('div[class*=img_f]').removeClass('active');

或

jQuery('.active').removeClass('active');

或

jQuery('div.active').removeClass('active');

或

jQuery('div[class*=img_f].active').removeClass('active');

【讨论】：