Question

我刚刚添加了允许用户上传和跟踪文件的功能。到目前为止，我正在页面上工作，它的工作非常完美。现在，我注意到，即使是艰难的页面看起来也一样，但实际上有aspx和cshtml页面。那么，为什么链接显示＆＃34;上传文件＆＃34;，在HTML中看起来像：

<a id="Repeater1_menuLinkButton_7" class="ui-state-default xci-button" role="button" aria-disabled="false">Upload Files</a>
<a href="#" class="ui-state-mainNav ui-state-default xci-button" role="button" aria-disabled="false">Upload Files</a>
可能是其他类型的ids

在意识到不仅有一种类型之前，这就是我选择对点击链接做出反应的方式：

$('#Repeater1_menuLinkButton_7').click(function () {
     //code here ...
 });

对于第二个没有ID的元素，它将类似于：

$("a:contains('Upload Files')").click(function () {
     //code here ...
 });

有没有办法选择多个元素以避免代码重复？

感谢您的帮助。

Answer 1

您可以使用其他CSS选择器，在这种情况下添加,：

$("#Repeater1_menuLinkButton_7,a:contains('Upload Files')").click(function () {
     //code here ...
});

或者使用jQuery＆＃39; .add()方法：

$('#Repeater1_menuLinkButton_7').add("a:contains('Upload Files')").click(function () {
     //code here ...
});

Answer 2

HTML ##

   <input type="button" id="button1" value="Button1" />
    <input type="button" id="button2" value="Button2" />
    <input type="button" id="button3" value="Button3" />
    <input type="button" id="button4" value="Button4" />

Jquery的

 $('#button1, #button2, #button3, #button4').click(function(event){



         if($(event.target).attr('id')=='button1'){
            /* File upload code for upload1 */
             alert("Button 1 Clicked");
        } else if($(event.target).attr('id')=='button2'){
            /* File upload code for upload2 */
               alert("Button 2 Clicked");
        } else if($(event.target).attr('id')=='button3'){
            /* File upload code for upload3 */
            alert("Button 3 Clicked");
        } else if($(event.target).attr('id')=='button4'){
            /* File upload code for upload4 */
             alert("Button 4 Clicked");
        } 

    })

Demo Check this out Fiddle

Answer 3

您有几个选择：

选项1 - 在事件处理赋值之外定义函数，并将其作为参数传递

function myFunction() {
     // Do some stuff
}
// note the lack of parentheses when passing the function
$('#Repeater1_menuLinkButton_7').click(myFunction);
$("a:contains('Upload Files')").click(myFunction);

选项2 - 同时选择两个元素，用逗号分隔

$("#Repeater1_menuLinkButton_7, a:contains('Upload Files')").click(function () {
    // Do some stuff
});

选项3 - 为要分配给

的所有元素添加新类

$(".myNewClass").click(function () {
    // Do some stuff
});

如何在jquery中选择多一个元素以避免代码重复？

3 个答案:

HTML ##

Jquery的