How do make a button find an id name
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()
加载中,请稍侯......
精彩评论