Modify this line of code
var panelID = "panel_" + $("input").val();
to
var panelID = "panel_" + $(this).val();
On Oct 30, 9:56 am, AlChuck <alan.oeh...@alanoehler.com> wrote:
> Hello, I'm new to using jQuery. I was motivated by wanting to put some
> panels on an ASP.NET website which would display additional info if a
> link or button was clicked. I found a simple tutorial and mimicked
> that and it works fine, but uses the specific ID of the hyperlink to
> trigger the action. My page needs a list of items, and if you click on
> one, extra information appears right below the item. So what I want to
> do is capture clicks on any link, read the ID, and then use the ID to
> identify the ID of the related asp:Panel element.
>
> Here's the starting point:
>
> <script type="text/javascript">
> $(function() {
> $("#myButtonID").click(function(evt) {
> evt.preventDefault();
> $('#myPanelID').toggle('fast');
> });
> });
> </script>
>
> If you click on the button rendered thusly:
>
> <input id="myButtonID" type="button" value="Hide/Show" />
>
> The panel with id="myPanelID" is toggled (the CSS defines it so that
> display is set to "none" by default.
>
> But I want a list of these panels and buttons on my page, so I want
> the code to be able to do this for any of the buttons I click.
>
> It also works if instead of the button with the specific ID
> "myButtonID" I change
>
> $("#myButtonID").click(function(evt)
>
> to
>
> $("input").click(function(evt)
>
> My impression is that this will cause the code to trigger if any input
> element on the page is clicked, which is the first step to what I want
> to do. My notion is that I can then get the value of the clicked
> button and use that value to identify which panel to animate.
>
> One of the FAQs on the jQuery site says I can get the value of the
> button thusly:
>
> var mybuttonval = $("input").val();
>
> Then I could use a simple naming convention and use that value to
> identify the Panel I want to animate. For example, if my button had
> the value "ACME_widget-mach1" I could set the Panel I want to show
> text in to "panel_ACME_Widget-mach1"
>
> So I rewrote my code as follows:
>
> <script type="text/javascript">
>
> $(function() {
> $("input").click(function(evt) {
> var panelID = "panel_" + $("input").val();
> evt.preventDefault();
> $(panelID).toggle('fast');
> });
> });
> </script>
>
> It appeared to work just like I hoped... until I put in a second
> button/panel pair, with button ID= ACME_widget-mach2 and panel ID=
> panel_ACME_widget-mach1. What happens is, regardless of which button I
> click, only the first panel, the one with ID=panel_ACME_widget-mach1
> is toggled.
>
> It's as if when any button is clicked, the value I am getting is the
> value of the first button in the collection. I put in an alert box
> right after declaring the variable to test this:
>
> alert(panelID);
>
> and sure enough, the value that displays is the value assigned to the
> first of these buttons on the page.
>
> So what am I doing wrong here? How can I get the value of the button
> that is actually clicked?
>
> Thanks!
>
> Alan
