通过单击带有 jquery 的按钮在循环中显示图像？

Question

I have a loop that displays three images this loop:

 @foreach (var item in Model)
                            {
                                <img id="img" src="@item.imgname" />
                            }

so I have three buttons:

<div class="box-img">
     <a class="btn btn-success">First pic</a>
     <a class="btn btn-info">second pic</a>
     <a class="btn btn-primary">third pic</a>
 </div>

When the "First pic" tag is clicked, the first image is displayed and the "second pic" tag is clicked, the second image is displayed and...

How can I doing?

Answer 1

Display the image in the loop by clicking the button with jquery

You can refer to the following code snippet to achieve the requirement.

HTML code

<div id="img_container">
    @foreach (var item in Model)
    {
        <img id="img" src="@item.imgname" />
    }
</div>

<hr />

<div class="box-img">
    <a class="btn btn-success">First pic</a>
    <a class="btn btn-info">second pic</a>
    <a class="btn btn-primary">third pic</a>
</div>

jQuery code

$(function () {
    //hide all these three images
    $("div#img_container img").hide();

    //display the first image
    $("div#img_container img:nth-child(1)").show();

    //display the first image
    $("a.btn-success").click(function () {
        $("div#img_container img").hide();

        $("div#img_container img:nth-child(1)").show();
    });

    //display the second image
    $("a.btn-info").click(function () {
        $("div#img_container img").hide();

        $("div#img_container img:nth-child(2)").show();
    });

    //display the third image
    $("a.btn-primary").click(function () {
        $("div#img_container img").hide();

        $("div#img_container img:nth-child(3)").show();
    })
})

Test Result