Search jQuery

jQuery Forum

alex.serj..

Hide selected id with jQuery

in Using jQuery • 10 years ago

Hello everyone, I am stuck at part where I click a button, next which id=getOffer it hides, the button id=gotOffer shows up. In this code I have 50 buttons as you can see.

If I delete these "+i" 's code works just for first button.

Can anyone help me please? Thanks

<script type="text/javascript">
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","xml/20121106.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("promotion");
for (i=1;i<(x.length=50);i++)
{
$("#getOffer"+"i").click(function () {
$("#getOffer"+"i").hide();
$("#gotOffer"+"i").show();
});
$("#gotOffer"+"i").click(function () {
$("#gotOffer"+"i").hide();
$("#getOffer"+"i").show();
});
document.write("<div class='oneDeal'>");
document.write("<div class='imgDeal'>");
document.write(x[i].getElementsByTagName("PROGRAMURL")[0].childNodes[0].nodeValue);
document.write("</div><div class='nameDeal'>");
document.write(x[i].getElementsByTagName("DESCRIPTION")[0].childNodes[0].nodeValue);
document.write("</div><div class='linkDeal'>");
document.write("<input type='button' class='offer' id='getOffer"+i+"' value='Click for Code' onclick='click()'><input type='button' class='offer' id='gotOffer"+i+"' style='display:none' onclick='click()'>");
document.write("</div>");
document.write("</div>");
}
</script>

Replies(2)

dsvick

Re: Hide selected id with jQuery

10 years ago

What does the xml look like that you're getting the elements from? OR, better yet, can you post the generated markup?

You're righting the javascript inline and not using the ready handler so it will execute right away, in this case when you remove the +i you're simply setting a click handler for an element with that id. The problem you're running into though is that none of the elements exist yet so you'll need to either use the ready handler or use on (http://api.jquery.com/on/ ) to set the handler. Also, instead of adding a handler for every button you can add a single handler for all buttons that have the same beginning to their IDs.

There are a few things I can see right off that you can change that will simplify this. Try this here:

<script type="text/javascript">
$(function() {
$("input[id^=getOffer]).click(function () {
var x = $(this).data("id");
$("#getOffer"+x).hide();
$("#gotOffer"+x).show();
});
$("input[id^=gotOffer]).click(function () {
var x = $(this).data("id");
$("#gotOffer"+x).hide();
$("#getOffer"+x).show();
});
});
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","xml/20121106.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("promotion");
for (i=1;i<(x.length=50);i++)
{
document.write("<div class='oneDeal'>");
document.write("<div class='imgDeal'>");
document.write(x[i].getElementsByTagName("PROGRAMURL")[0].childNodes[0].nodeValue);
document.write("</div><div class='nameDeal'>");
document.write(x[i].getElementsByTagName("DESCRIPTION")[0].childNodes[0].nodeValue);
document.write("</div><div class='linkDeal'>");
document.write("<input type='button' class='offer' id='getOffer"+i+"' data-id='" + i + "' value='Click for Code' onclick='click()'><input type='button' class='offer' id='gotOffer"+i+"' data-id='" + i + "' style='display:none' onclick='click()'>");
document.write("</div>");
document.write("</div>");
}
</script>