toggleClass current target

Question

I just would like to change the class minus in the current target, but this is not working..

JQUERY:

$('.btn-produto-detalhes').click(function(e) {
  e.preventDefault();
  $(this).prev('div').slideToggle('fast');
  $('.btn-produto-detalhes span').toggleClass('minus');
});

CSS:

#produtos #produto-content a.btn-produto-detalhes, #produtos #produto-content a.btn-produto-detalhes:visited, #produtos #produto-content a.btn-produto-detalhes:hover{display: block; width: 100%; margin-bottom: 15px; height: 20px; position: relative; }
#produtos #produto-content a.btn-produto-detalhes span{width: 20px;height: 20px; right: 0; top: -10px; position: absolute; border-radius: 10px;}
#produtos #produto-content a.btn-produto-detalhes span:before {font-family:'Arial', sans-serif;content: "+";color: #fff;height: 20px;position: absolute;right: 0;top: 1px;width: 20px;vertical-align: middle; text-align: center; font-weight: bold; }
#produtos #produto-content a.btn-produto-detalhes span.minus:before {content: "-";}

Exemplo: http://zam.ba/demo

Answer 1

Use this to find the span. this inside the event handler refers to the element which called the handler in this case the clicked btn-produto-detalhes element, so use it along with .find() to find the span inside it

$('.btn-produto-detalhes').click(function(e) {
  e.preventDefault();
  $(this).prev('div').slideToggle('fast');
  //find the span within current btn-produto-detalhes
  $(this).find(span').toggleClass('minus');
});