獲取點擊列表項

的ID在前面的例子中，我抓住每一個明確其點擊列表項的ID，這是不實際&高效特意用了太多的項目。我想實現的是動態獲取它，而不用硬編碼所有列表項。

$(function() { 
    $("#a1").click(function() 
    { 
     document.getElementById("dropdown").innerHTML = "A-1"; 
     document.getElementById("result").innerHTML = process("a1"); 
    }); 

    $("#a2").click(function() 
    { 
     document.getElementById("dropdown").innerHTML = "A-2"; 
     document.getElementById("result").innerHTML = process("a2"); 
    }); 

    $("#a3").click(function() 
    { 
     document.getElementById("dropdown").innerHTML = "A-3"; 
     document.getElementById("result").innerHTML = process("a3"); 
    }); 
}); 

function process(param) 
{ 
    // Some processing! 
    return param; 
}

來源

2013-01-31 Omranic

要使用現有的代碼，改變它儘可能少的可以綁定到ul.dropdown-menu li，而不是從一開始的HTML a裏面並使用當前（this）li的id值，與此類似：

$("ul.dropdown-menu li").click(function() { 
    var $link = $(this); 
    document.getElementById("dropdown").innerHTML = $("a", $link).html(); 
    document.getElementById("result").innerHTML = process(this.id); 
});

DEMO - 更換多個單點擊事件

來源

2013-01-31 23:33:08 Nope

那麼，你的解決方案效果很好。但我不明白爲什麼「this.id」而不是「$（this）.id」？你能告訴我嗎.. – Omranic

'this'是指DOM元素。默認情況下，DOM元素具有'id'字段，就像它有一個'innerHTML'或'value'字段（還有一些我認爲的）。爲了訪問'id'或'innerHTML'字段，不需要在它周圍包裝一個jQuery包裝器。當然，如果你想包裝，沒有傷害，也不會有明顯的性能損失。它只是不需要。 – Nope

選擇基於其位置的元素：

$(function() { 
    $(".dropdown-menu li").click(function() { 
     var text = $(this).text(); 

     $("#dropdown").text(text); 
     $("#result").text(process(text)); 
    }); 
});

所以不是找#a1，你找的<ul class="dropdown-menu">內<li>元素。

演示：http://jsfiddle.net/Ht8eP/5/

來源

2013-01-31 23:30:03 Blender

您可以使用所有<li>同一類別，然後只綁定到類。至於細節，我建議要麼使用id或data-id：

$(".a").click(function() 
{ 
    document.getElementById("dropdown").innerHTML = "A-" + $(this).data('id');; 
    document.getElementById("result") 
       .innerHTML = process("a" + $(this).data('id')); 
});

http://jsfiddle.net/ExplosionPIlls/Ht8eP/6/

來源

2013-01-31 23:31:49

添加您自己的屬性，所有你需要處理和編寫一個通用的jQuery選擇表達式來選擇基於您的屬性，所有這些元素的元素。這樣的事情....

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Untitled Page</title> 
    <script src="jquery-1.6.1.min.js" type="text/javascript"></script> 
    <script language="javascript"> 
     $(function() { 
      $("[process]").click(function() { 
       $("#dropdown").html($(this).attr("process")); 
       $("#result").html($(this).attr("process")); 
      });    
     }); 

     function process(param) { 
      // Some processing! 
      return param; 
     } 
    </script> 
</head> 
<body> 
<a process="A-1" id="a1" href="#">A-1</a> 
<a process="A-2" id="a2" href="#">A-2</a> 
</body> 
</html>

來源

2013-01-31 23:39:20 pranag

代碼優化

$(function() { 

    $("li","ul.dropdown-menu").click(function(){ 
     $("#dropdown").html($(this).html()) ; 
     $("#result").html(process($(this).attr('id'))); 
    }); 
}); 

function process(param){ 
    // Some Processing! 
    return(param); 
}

來源

2013-02-03 03:31:33 penacho123

獲取點擊列表項

回答

相關問題