Question

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

CSS代码

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

JQUERY CODE

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

HTML CODE

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

问题在于，当我点击第一个元素显示红色边框时，当我点击第二个元素时，也会显示红色边框，但在元素边框之前没有隐藏

我不知道我怎么能做到这一点来修复并最终工作

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

Answer 1

这是因为您要从同一项目中删除该课程，并将其添加到...

试试这个：

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

Answer 2

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

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

BTW，反复调用remove()是一个糟糕的设计。为所有元素提供相同的类，然后只执行一次：

＆＃13;

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

＆＃13;

.active {
  border: 4px solid red;
}

＆＃13;

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

＆＃13;

Answer 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');

Jquery在div中显示和隐藏边框

3 个答案: