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来访问被点击的元素，因此可以使用以下内容来获取其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中，您通常可以使用以下方式获取元素：

的document.getElementById（ “myButton的”）

如果您已为其指定了ID。如果你有，你可能也可以稍微修改你的代码并使用这样的东西：

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

Here是更多细节。

使用JavaScript获取所选按钮的ID

5 个答案: