使用JavaScript获取所选按钮的ID

Question

Currently I have a list of options (Which can be selected through clicking the button next to the option.)

The following is the JavaScript code when I click the button.

    $('.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();
    });

What I'm trying to do is get the ID of the actual selected button - Not directly from the class.

                       <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>

What's the best way to find the ID of the button I just clicked.

I'm currently using: var os_name = $('.step3').attr('id'); Which simply isn't working.

Answer 1

Within a jQuery event handler the this keyword will refer to the element which raised the event.

As such, you can use either this.id or $(this).prop('id'); . Note however that the former is by far the better practice.

Answer 2

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

Answer 3

Within your jQuery event handler (or in handlers registered with addEventListener ) you can just use this to access the clicked element and therefore the below to get its ID:

var os_name = this.id;

It's completely portable and maximally efficient.

Please do not be tempted to use $(this).attr('id') . A console.trace for that is shown below:

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

This shows that just the .attr call alone requires a further three function calls internally, and that's even before you account for the overhead of calling $(this) .

Using $(this).attr('id') replaces a trivial property look up with at least five function calls!

Answer 4

Are you using jQuery as well? Try:

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

Answer 5

In Javascript you can generally get an Element by Id using:

document.getElementById("myButton")

if you have assigned it an Id. If you have you might also be able to modify your code a little and use something like this:

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

Here is some more details.