附加元素

Question

// Jade

.gj-funded-research.occ-group

  .occ

    h1.occ__reveal Funded Research

    .occ__hidden

      h3 Funded Research

      p Content

  .occ

    h1.occ__reveal Funded Research

    .occ__hidden

      h3 Funded Research

      p Content

// Angular

angular.module('core')
.directive('occGroup', function() {

  return {
    restrict: 'AEC',
    link: function(scope, element, attrs) {

      var occ = $('.occ'),
          occReveal = $('.occ__reveal'),
          occHidden = $('.occ__hidden'),
          occBack = $('<div/>').text('Back').addClass('occ__back'),
          doc = $(document)

      occHidden.append(occBack)

      occReveal.on('click', function() {
        $(this).siblings('.occ__hidden').addClass('show')
        console.log('occReveal clicked')
      })

      occBack.each(function() {
        $(this).on('click', function() {
          occHidden.removeClass('show')
          console.log('occBack clicked')            
        })
      })

    }
  }

})

我将一个按钮元素附加到每个.occ-hidden元素，然后为每个按钮分配一个click函数，从而从它的直接父.occ-hidden元素中删除一个类。目前，click函数仅适用于最后一个.occ元素，这意味着，当我单击最后一个.occ元素中的button元素时，所述类将从.occ-hidden中删除。但对于任何先前的.occ元素，情况并非如此。在处理追加元素时，我需要做些什么？