одним нажатием кнопки-событие для нескольких функций

Question

У меня есть следующий код:

$('#picture-div').click(function(){ 
    $('#div-in-document').fadeToggle('slow', $func1); 
}); 
$('#picture-div2').click(function(){ 
    $('#div-in-document2').fadeToggle('slow', $func2); 
}); 

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

$('#picture-div ,#picture-div2').click(function(){ 
    if($(this) == '#picture-div') 
     $('#div-in-document').fadeToggle('slow', $func); 
    else 
     $('#div-in-document2').fadeToggle('slow', $func2); 
}); 

Но всегда идти к else, так что мое Условный оператор является недействительным.

Спасибо.

Answer 1

Изменить разметку с использованием data-* атрибутов, как:

<div class="picture-div" data-target="someId">...</div> 
<div class="picture-div" data-target="someOtherId">...</div> 

И ваш JS будет просто:

var yourFunctions = { 
    someId : function(){...}. 
    someOtherId : function(){...} 
} 

$('.picture-div').click(function(){ 
    var target = $(this).data('target'); 
    $('#' + target).fadeToggle('slow', yourFunctions[target]); 
}); 

Поддержание работоспособности безопасно, hoorray.

Answer 2

Может быть что-то вроде этого:

$('#picture-div ,#picture-div2').click(function(){ 
    if($(this).attr("id") == '#picture-div') 
     $('#div-in-document').fadeToggle('slow', $func); 
    else 
     $('#div-in-document2').fadeToggle('slow', $func2); 
}); 

Или вы можете сделать вид отображения:

var arr = [ { selector: "#picture-div", subselector: "#div-in-document", func: $func1}, 
      { selector: "#picture-div2", subselector: "#div-in-document2", func: $func2}] 

и пройти через него для назначения обработчика:

for(int i = 0; i < arr.length; i++) 
{ 
    $(arr[i].selector).click(function(){ 
     $(arr[i].subselector).fadeToggle('slow', arr[i].func); 
    }); 
} 

Answer 3

Попробуйте вместо и я надеюсь, что он будет работать

$('#picture-div ,#picture-div2').click(function(){ 
    if($(this) == $('#picture-div')) 
     $('#div-in-document').fadeToggle('slow', $func); 
    else 
     $('#div-in-document2').fadeToggle('slow', $func2); 
}); 

Я не проверял, но я уверен, что он будет работать