Question

我想点击一个按钮并显示匹配的ID名称。我不知道如何使用contains，has或filter来使这项工作。基本上，单击一个按钮找到它的id名称。然后，如果它的id名称与nameList中的名称匹配，则仅显示该id。

第二个问题。必须有一个更好的方法来调用所有的buttonNames而不是我用变量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>
    </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>

Answer 1

试试这个：

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

编辑：确保修复你的HTML <div = "list">到<div id = "list"> <div = "buttonList">至<div id = "buttonList">

Answer 2

您的HTML中不能包含重复的ID。并且，您已经拥有了一个按钮值，该值为您提供了要引用相应LI标记的名称。所以，我建议您只删除按钮上的Id值，然后使用this.value为您提供所需的名称。

因此，要清理HTML以使其合法（没有重复ID），我会使用此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>

使用此javascript仅显示LI标记，其名称与点击的按钮匹配：

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

而且，你可以看到它在这个jsFiddle：http://jsfiddle.net/jfriend00/Vhgrg/

中有效

Answer 3

试试这个：

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

jsFiffle

其中包含表单的div没有指定为class或id的属性名称buttonList，我假设为id。同样在评论中，ID必须在页面中是唯一的

Answer 4

尝试以下

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

请注意，仅由于无效的重复ID而需要.nameList部分。

另请注意，在您的代码中，您隐藏的是整个无序列表，而不是每个项目。

所以用$('.nameList').hide

替换$('.nameList li').hide()

如何使按钮找到id名称

4 个答案: