Jquery показать и скрыть границы в дивы

Question

я пытаюсь показать границы в дивы, когда я нажимаю в одном и спрятаться в другой в каждом клике

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> 

Проблема подмигнула что, когда я нажимаю над первым элементом шоу красной каймы и когда я сделать кнопку на второй элемент также показывает красную граница, но не скрыть до границы элемента

Я не знаю, как я могу это сделать для исправления и работы, наконец,

Tha наилучшими пожеланиями и thank's за помощь

Answer 1

Это происходит потому, что вы удаляете класс из того же элемента, который вы собираетесь добавить его .. .

Попробуйте это:

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

Answer 2

Я думаю, что это должно работать

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

Answer 3

Вы не хотите, чтобы удалить active класс из текущего элемента, вы хотите, чтобы удалить его из предыдущего активного элемента. Так оно и должно быть:

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

BTW, неоднократно называя remove() это плохой дизайн. Дайте все ваши элементы в же класс, а затем просто сделать это один раз:

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>