使用JavaScript獲取所選按鈕的ID

Question

目前，我有一個選項列表（可以通過單擊選項旁邊的按鈕來選擇。）

以下是單擊按鈕時的JavaScript代碼。

    $('.step3').click(function() {
        var os_name = $('.step3').attr('id');
        alert(os_name);
        var os_update;
        os_update ="nothing so far";
        if (os_name == "os_c_5_64") {
        os_update = "centos-5-x86_64";
        }
        if (os_name == "os_c_6_64") {
        os_update = "centos-6-x86_64";
        }
        if (os_name == "os_c_65_64") {
        os_update = "centos-6.5-x86_64";
        }

        alert(os_update);
        $('#vmos').val(os_update).change();
    });

我想做的是獲取實際選擇的按鈕的ID-不是直接從類中獲取。

                       <tr class="appliance">
                            <td class="distro"><img src="<?=$this->tpl_asset_path;?>images/centos.jpg"></td>
                            <td class="description">Centos 5 64bit</td>
                            <td class="author">Linux distribution</td>
                            <td class="text-right"> <li class="step3" id="os_c_5_64" style="list-style: none;"><a class="btn btn-primary create" data-toggle="tab" href="#step3">Select</a></li></td>
                        </tr>

                        <tr class="appliance">
                            <td class="distro"><img src="<?=$this->tpl_asset_path;?>images/centos.png"></td>
                            <td class="description">Centos 6 64bit</td>
                            <td class="author">Linux distribution</td>
                            <td class="text-right"> <li class="step3" id="os_c_6_64" style="list-style: none;"><a class="btn btn-primary create" data-toggle="tab" href="#step3">Select</a></li></td>
                        </tr>
                        <tr class="appliance">
                            <td class="distro"><img src="<?=$this->tpl_asset_path;?>images/centos.png"></td>
                            <td class="description">Centos 6.5 64bit</td>
                            <td class="author">Linux distribution</td>
                            <td class="text-right"> <li class="step3" id="os_c_65_64" style="list-style: none;"><a class="btn btn-primary create" data-toggle="tab" href="#step3">Select</a></li></td>
                        </tr>

查找我剛剛單擊的按鈕的ID的最佳方法是什么。

我當前正在使用： var os_name = $('.step3').attr('id'); 哪個根本行不通。

Answer 1

在jQuery事件處理程序中， this關鍵字將引用引發事件的元素。

因此，您可以使用this.id或$(this).prop('id'); 。 但是請注意，到目前為止，前者是更好的做法。

Answer 2

請改用this.id或jQuery版本$(this).attr("id")

Answer 3

在您的jQuery事件處理程序中（或在addEventListener注冊的處理程序中），您可以使用this來訪問clicked元素，因此可以通過以下操作獲取其ID：

var os_name = this.id;

它是完全便攜式的，效率最高。

請不要試圖使用$(this).attr('id') 相應的console.trace顯示如下：

f.extend.propjquery.min.js:2
f.extend.attrjquery.min.js:2
e.extend.accessjquery.min.js:2
f.fn.extend.attr

這表明僅.attr調用就需要在內部再進行三個函數調用，這甚至還沒有考慮到調用$(this)的開銷。

使用$(this).attr('id')用至少五個函數調用來替換瑣碎的屬性查找！

Answer 4

您是否也在使用jQuery？ 嘗試：

$(this).attr('id');

Answer 5

在Javascript中，通常可以使用以下方法通過ID獲得Element：

的document.getElementById（ “myButton的”）

如果您已為其分配一個ID。 如果有的話，您也許也可以稍微修改一下代碼，並使用如下代碼：

<script>
  function getValue()
  {
    var x=document.getElementById("myHeader");
    alert(x.innerHTML);
  }
</script>

這是更多細節。