2015-06-18 51 views
0

我可以創建Jquery函數,但如果你想要更多的功能呢。 例如說我想有一個下拉列表和一個按鈕的功能。 我只能似乎做一個功能:如何在jQuery中有多個函數?

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("button").click(function() { 
     this.hide(); 
     }); 
    }); 
</script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("banner").click(function() { 
     this.fadeTo(); 
     }); 
    }); 
</script> 

是如何在一個文檔中創建多個功能的這種權利或者是有創建它們更簡單的方法? 你能告訴我如何創建多個而不是一個?

+0

你能解釋一下你試圖做的更好一點,如果你的意思是你想要選擇多個元素,用逗號分開你的選擇器,'#foo ,#bar'。 –

回答

7

兩個功能可以去同一個文檔準備函數內部:

<script type="text/javascript"> 
$(document).ready(function() { 
    $("button").click(function() { 
     $(this).hide(); 
    }); 
    $("banner").click(function() 
     $(this).fadeTo(); 
    }); 
}); 
</script> 

然而,選擇$("banner")是無效的,如果你的目標一類的旗幟應該是$(".banner"),ID將$("#banner")

+5

此外,缺少雙引號。 – Brewal

+0

趕上@Brewal,更新了我的答案。 – APAD1

1

您可以將它們放在相同的$(document).ready函數中 - 您不需要爲每個事件偵聽器準備好新文檔。

<script type="text/javascript"> 
$(document).ready(function() { 

    $("button").click(function() { 
     $(this).hide(); 
    }); 

    $("banner).click(function() { 
     $(this).fadeTo(); 
    }); 
}); 
</script> 

而且你$("banner")選擇是無效的 - 看看jQuery的選擇器文檔瀏覽:https://api.jquery.com/category/selectors/

2

你還是使用單文檔準備事件,然後包裹在它的兩種方法。

您需要使用類選擇的元素有banner類it.also雙引號丟失在此選擇 的結尾:

$(document).ready(function() { 
    $("button").click(function() { 
    $(this).hide(); 
    }); 
    $(".banner").click(function() { 
    $(this).fadeTo(); 
    }); 
}); 
+0

非常感謝您的支持 – matty

+0

@matty:很高興幫助:) –

0

,你只需要一個$(document).ready(function() {})

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("button").click(function() { 
      $(this).hide(); 
     }); 
     $("banner").click(function() { 
      $(this).fadeTo(); 
     }); 
    }); 
</script> 
0

合併兩組,改變$("banner)$(".banner")

$(document).ready(function() { 
    $("button").click(function() { 
     $(this).hide(); 
    }); 
    $(".banner").click(function() 
     $(this).fadeTo(); 
    }); 
}); 
0

CONCAT按鈕&橫幅廣告點擊代碼$(document).ready

<script type="text/javascript"> 
$(document).ready(function() { 
    $("button").click(function() { 
     $(this).hide(); 
    }); 
    $("banner").click(function() { 
     $(this).fadeTo(); 
    }); 
}); 
</script> 
0

如果你是去使用該代碼幾次是很容易編寫隱藏某個元素的函數。然後你只需要用參數(你的DOM的值)調用函數

function hideElement(value) 
{ 
    $('' + value +' ').click(function() { 
     $(this).fadeTo();  
    }); 


    $(document).ready(function() { 
     hidedElement(banner); 
     hideElement(button); 

    }); 
相關問題