JQuery help: .click() для каждого отдельного элемента

Question

Я написал этот код, чтобы добавить класс (.box-open, который добавляет отображение: блок) в мое поле (.sharebox), когда нажата кнопка (#share-but), но проблема у меня возникают проблемы с тем, что это применимо только к одному .share div за раз, потому что каждый раз, когда я нажимаю кнопку, все .sharebox получают класс .box-open, примененный к нему.

function shareBox() { 
$('.share').each(function(index) { 
    $(this).on('click', '#share-but', function() { 
     if ($('.sharebox').hasClass('box-open')) { 
      $('.sharebox').removeClass('box-open'); 
     }   
     else { 
      $('.sharebox').addClass('box-open'); 
     } 
    }); 
}); 
} 
shareBox(); 

Вот изображение проблемы (я создаю тему Tumblr). Надеюсь, это намного легче понять. http://24.media.tumblr.com/c5c4252607bf4a9905c7c9de5b592c60/tumblr_ml4t2fSuQo1rqce8co1_500.png < ---- Это произошло, когда я нажал одну из кнопок, но мне нужно только один .sharebox, чтобы добавить к нему класс .box-open, когда я нажимаю на #share-but внутри того же .share div.

Я надеюсь, что все это имело смысл. Я все еще очень люблю в Javascript/Jquery, так как только начал учиться, как 2 недели назад, поэтому любая помощь очень ценится!

Answer 1

Вы должны использовать $(this) вместо $('.sharebox') обратиться источник события

$('.sharebox').addClass('box-open'); 

Было бы

$(this).addClass('box-open'); 

Идентификатор элемента должен быть в документе уникальный, так что вы можете связать щелкните прямо на '# share-but', если он не уникален, вы можете связать его так.

$('.share').on('click', '#share-but', function() { 
    if ($('.sharebox').hasClass('box-open')) { 
     $('.sharebox').removeClass('box-open'); 
    }   
    else { 
     $('.sharebox').addClass('box-open'); 
    } 
}); 

Вы можете использовать toggleClass, чтобы сделать его простым, я предполагаю, что у вас есть один элемент с ID # долей, но,

$('#share-but').click(function(){ 
    $(this).toggleClass("box-open"); 
}); 

Answer 2

Это было бы более простой вариант, вы можете переключать :) имя класса

$('.share').on("click", "#share-but", function() { 
     $(this).find(".sharebox").toggleClass('box-open'); 
    });