Включите toggleClass, когда элемент щелкнут во второй раз

Question

Я новичок в написании JQuery и у меня проблема с моей функцией toggleClass. Я написал простую функцию, которая изменяет стиль элемента при его выборе. Затем, когда выбран другой элемент, стиль удаляется из предыдущего элемента и помещается на новый. Это работает. Моя проблема - когда вы нажимаете на элемент, который в настоящее время имеет стиль, второй раз, стилизация не удаляется. Я хочу, чтобы стиль был удален, когда элемент щелкнул второй раз. Я вставил код ниже, но вы можете увидеть рабочий пример в jsfiddle: http://jsfiddle.net/Ana32/pumyjgev/

Спасибо!

HTML

<div class="portfolio"> 


        <div class="portfoliowork photochange"> 

         <img src="images/icon.png" class="togglephoto" data-toggleid="toggledesc4"> 
        </div> 


        <div class="portfoliowork photochange"> 

         <img src="images/icon.png" class="togglephoto" data-toggleid="toggledesc5"> 
        </div> 

        <div class="portfoliowork photochange"> 
         <img src="images/icon.png" class="togglephoto" data-toggleid="toggledesc6"> 
        </div> 

        <div class="whowearetext toggledesc toggledesc4"> 
         <h4>Title</h4> 
         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.</p> 
         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est. 
</p> 
        </div> 

       <div class="whowearetext toggledesc toggledesc5"> 
         <h4>Title</h4> 
         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.</p> 
         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est. 
</p> 
        </div> 


        <div class="whowearetext toggledesc toggledesc6"> 
         <h4>Title</h4> 
         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.</p> 
         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est. 
</p> 
        </div> 
         </div> 

CSS

.photochange h4{ 
    display:none; 
} 

.teamchange h4{ 
    display:block; 
    z-index: 50; 
    float: left; 
    position: absolute; 
} 


.teamchange img{ 
z-index: -10; 
    border:5px solid #7bc32b; 
} 

JS

$('.stylingchange').click(function(){ 
    $('.wwaiconchange').removeClass('wwaiconchange'); 
    $(this).toggleClass('wwaiconchange'); 
}) 



    $('.photochange').click(function(){ 
     $('.teamchange').removeClass('teamchange'); 
     $(this).toggleClass('teamchange'); 

    }); 


$('img[data-char=togglephoto1]') 
    $(function(){ 
     $('.toggledesc').hide(); 

     $('.togglephoto').on('click', function(){ 
      var toggleid = $(this).attr('data-toggleid'); 
      $('.toggledesc').not('.' +toggleid).slideUp("slow"); 
      $('.' +toggleid).slideToggle("slow"); 
     }); 

    }); 

Answer 1

Логика в вашем .photochange обработчик щелчка является проблемой. Сначала вы удаляете класс из всех элементов, затем переключите его обратно на на тот, который был нажат. Это означает, что нажатый может только когда-либо находиться в состоянии «включено».

Вместо переключение класса по щелкнутому элементу, но только удалить его из siblings() этого элемента:

$('.photochange').click(function() { 
    $(this).toggleClass('teamchange').siblings().removeClass('teamchange'); 
}); 

Updated fiddle

Также обратите внимание, что я немного поправил свой код в скрипке, как и вы создали неиспользуемый объект jQuery и имели вложенный обработчик DOMReady.