如何使用圖片的ALT消防jQuery的單擊事件

我在我的asp.net頁面如下圖：如何使用圖片的ALT消防jQuery的單擊事件

<asp:Image ID="imgExpCol" AlternateText="plus" ClientIDMode="Static" ImageUrl="~/theImages/subTaskPlus.png" runat="server" CssClass="imgExpCol" />

在我的JQuery以下：

$(function() { 
    $("body").on('click', "#imgExpCol", function() { 
     alert("test"); 
     $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>") 
     $(this).attr("src", "../theImages/subTaskMinus.png"); 
     $(this).attr("alt", "minus"); 
    }); 
    $("body").on('click', "#imgExpCol", function() { 
     alert("test2"); 
     $(this).attr("src", "../theImages/subTaskPlus.png"); 
     $(this).attr("alt", "plus"); 
     $(this).closest("tr").next().remove(); 
    }); 
});

當加被點擊，它展開TR並顯示減號。點擊減號時，它會摺疊TR並顯示加號。

如果我正在使用當前的#imgExpCol，則兩個事件都會關閉。我爲這兩個圖像使用了不同的ALT文本。我如何使用ALT文本而不是ID？

來源

2014-09-10 SearchForKnowledge

使用一個事件處理程序並檢查該處理程序中的當前'alt'。 – undefined 2014-09-10 12:46:24

並且除非圖像使用AJAX加載，否則不需要將事件處理程序附加到主體 – mplungjan 2014-09-10 12:47:40

您可以使用alt屬性在你選擇，讓你的JS會成爲：

$(function() { 
    $("body").on('click', "#imgExpCol[alt=firstalttext]", function() { 
     alert("test"); 
     $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>") 
     $(this).attr("src", "../theImages/subTaskMinus.png"); 
     $(this).attr("alt", "minus"); 
    }); 
    $("body").on('click', "#imgExpCol[alt=secondalttext]", function() { 
     alert("test2"); 
     $(this).attr("src", "../theImages/subTaskPlus.png"); 
     $(this).attr("alt", "plus"); 
     $(this).closest("tr").next().remove(); 
    }); 
});

EXAMPLE FIDDLE

來源

2014-09-10 12:47:35 ZiNNED

使用一個單一的點擊處理程序和使用條件要知道alt。根據情況，做一些事情。

$("body").on('click', "#imgExpCol", function() { //Is delegation really needed here? 
//$("#imgExpCol").on('click', function() { 
    if($(this).attr('alt') === 'plus'){ 
     alert("test"); 
     $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>") 
     $(this).attr("src", "../theImages/subTaskMinus.png"); 
     $(this).attr("alt", "minus"); 
    }else{ 
     alert("test2"); 
     $(this).attr("src", "../theImages/subTaskPlus.png"); 
     $(this).attr("alt", "plus"); 
     $(this).closest("tr").next().remove(); 
    } 
});

性能技巧：緩存$(this)到變量中。它會阻止你創建x個jQuery對象。

來源

2014-09-10 12:49:45

並且在頁面加載時存在圖像時移除主體事件 – mplungjan 2014-09-10 12:51:15

綁定兩個事件並不好，insted使用類來找出元素的狀態。

$(function() { 
    $("body").on("click", "#imgExpCol", function(){ 
     var t = $(this); 
     // check if is expanded 
     if(t.hasClass("expanded")) 
     { 
      t.attr("src", "../theImages/subTaskPlus.png"); 
      t.attr("alt", "plus"); 
      t.closest("tr").next().remove(); 
      t.removeClass("expanded"); 
     } 
     else 
     { 
      t.closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>") 
      t.attr("src", "../theImages/subTaskMinus.png"); 
      t.attr("alt", "minus"); 
      t.addClass("expanded"); 
     } 
    }); 
});

來源

2014-09-10 12:50:05

如何使用圖片的ALT消防jQuery的單擊事件

回答

相關問題