如何使用JavaScript定位HTML内的ID或类？

Question

I came across with a problem that both "button" tag inside my page are being affected with the toggle.js dropdown effect. So i decided to add an id to the first one so i can just call it in "toggle.js" the problem now is i wasn't sure which one should i change inside the code(js)? anyone knows how to target a button with id?

JsFiddle

Here is the toggle.js

$(function () {
img_arrow = '<img src="images/down-arrow.png" width="20" height="20" alt="" style="vertical-align:middle; padding-top: 0px;margin-left:2px"/>';

var $window = $(window),
    $nav = $('nav'),
    $button = $('button');

$button.on('click', function () {
    $nav.slideToggle();
});

$window.on('resize', function () {
    if ($window.width() > 320) {
        $nav.show();
    }
});

$('#menu a').click(function (e) {
    $('button').html($(this).html() + img_arrow);

    e.preventDefault();
});
});

Thank you in advance!

Answer 1

It would be $("button#ID").on('click', function () ....

Edit:

According to your fiddle, your button has a CLASS attribute, not ID. So the above would be $("button.submitButton").on('click' ...

Or like commented below, you can simply have it as $(".submitButton")... , but I like to be accurate, just incase you have multiple elements with same class value.

Answer 2

Use css syntax to select items using jQuery. Try $("#yourID").on('click', function())....