How do make a button find an id name_问答_开发者

开发者 https://www.devze.com 2023-04-09 04:43 出处：网络

I\'m wanting to click a button and have the matching id name show. I don\'t know how to use contains, has, or filter to make this work. Basically, click a button find it\'s id name. Then, if it\'s id

相关专题：jquery

I'm wanting to click a button and have the matching id name show. I don't know how to use contains, has, or filter to make this work. Basically, click a button find it's id name. Then, if it's id name matches one in nameList show only that id.

Second question. There has to be a better way to call all the buttonNames than the way I'm doing with variable bn.

</head>
<body>
    <div = "list">
        <ul class = "nameList">
            <li id ="Heather">Heather</li>
            <li id ="Cruz">Cruz</li>
            <li id ="Donny">Donny</li>
            <li id ="Jimmy">Jimmy</li>
        </ul>
    </div>
    <div = "buttonList">
        <form class = "buttonNames">
            <input type = "button" id = "Heather" value ="Heather"/>
            <input type = "button" id = "Cruz" value ="Cruz"/>
            <input type = "button" id = "Donny" value ="Donny"/>
            <input type = "button" id = "Jimmy" value ="Jimmy"/>
        </form>
    <开发者_StackOverflow社区/div>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    // JavaScript Document
    google.load("jquery", "1.6.2");
    google.setOnLoadCallback(function(){
        $('.nameList').hide();

/*      $(nameList).each(function(i) { 
            var i = $(this).text();
            console.log("i = " + i);
        });*/

        //var buttons = $('#Heather, #Cruz, #Donny, #Jimmy');
        var bn = $('.buttonNames').children();
        console.log(bn);

        $(bn).click(function() {
            console.log("You have clicked Button = " + $(this).attr('id'));
            var t = $(this).attr('id');
        });

    });

    </script>    
</body>
</html>

try this:

$('input[type=button]', '#buttonList').click(function() {
    alert($('ul.nameList #' + this.id).html());
});

edit: make sure you fix your html <div = "list"> to <div id = "list"> <div = "buttonList"> to <div id = "buttonList">

You cannot have duplicate IDs in your HTML. And, you already have the button value that gives you the name you want to refer to the appropriate LI tag. So, I'd suggest that you just get rid of the Id values on the buttons and use this.value to give you the name you need.

So, to clean up the HTML to make it legal (no dup IDs), I'd use this HTML:

<div id="list">
    <ul id = "nameList">
        <li id="Heather">Heather</li>
        <li id="Cruz">Cruz</li>
        <li id="Donny">Donny</li>
        <li id="Jimmy">Jimmy</li>
    </ul>
</div>
<div id="buttonList">
    <form class="buttonNames">
        <input type="button" value="Heather"/><br>
        <input type="button" value="Cruz"/><br>
        <input type="button" value="Donny"/><br>
        <input type="button" value="Jimmy"/><br>
    </form>
</div>

With this javascript to show only the LI tag with the name that matches the button clicked:

$("#buttonList input").click(function() {
    $("#nameList li").hide();
    $("#" + this.value).show();
});

And, you can see it work in this jsFiddle: http://jsfiddle.net/jfriend00/Vhgrg/

Try this:

$('#buttonList input').click(function() {
    $('li').hide();
    $('li#' + this.id).toggle();
});

jsFiffle

The div that has the form in it does not have the attribute name buttonList specified to be class or id, I assumed id on it. Also as in the comments the ids have to be unique in the page

Try the following

$('.buttonNames input').click(function() {
  var id = $(this).attr('id');
  $('.nameList #' + id).show();
});

Note that the .nameList part is only required due to the invalid duplication of ids.

Also note that in your code you're hiding the whole unordered list, rsther than each item.

So replace $('.nameList').hide with $('.nameList li').hide()

How do make a button find an id name

精彩评论

关注公众号

热门标签

图文推荐

How do make a button find an id name

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：