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，所以我的if语句无效。

感谢。

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);
});

我没有测试过，但我很确定它会起作用

多个功能的单击事件

3 个答案: