javascript - 如何根据图片点击打开局部 View ？

Question

我写信给你是因为我有点迷路了。

我想创建一个页面，其中有 3 张图片，每张图片都可以点击。

当我点击其中一张图片时，在同一页面上它应该会显示部分 View 。

如果我点击另一张图片，所有其他局部 View 应该消失，并且只显示所需的局部 View 。

我了解到，为了调用局部 View ，命令行应该是:

@{
Html.RenderPartial("_Android");
}

<div class="container-fluid">
<h2>MDMSection</h2>
<p>The .thumbnail class can be used to display an image gallery.</p>
<p>The .caption class adds proper padding and a dark grey color to text inside thumbnails.</p>
<p>Click on the images to see all Q&A</p>
<div class="row">
    <div class="col-md-4">
        <img id="imgReloader" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" />
        <div class="caption">
            <p>Android</p>
        </div>
    </div>
    <div class="col-md-4">
        <img id="image2" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" />
        <div class="caption">
            <p>iOS</p>
        </div>
    </div>
    <div class="col-md-4">
        <img id="image3" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" />
        <div class="caption">
            <p>Windows Phone</p>
        </div>
    </div>
</div>

我的部分通过应该出现在这里......

Answer 1

将 "onClick" 添加到调用函数的 img 标签中像这样:

<h2>MDMSection</h2>
<p>The .thumbnail class can be used to display an image gallery.</p>
<p>The .caption class adds proper padding and a dark grey color to text 
inside thumbnails.</p>
<p>Click on the images to see all Q&A</p>
<div class="row">
    <div class="col-md-4">
    <img id="imgReloader" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" onclick="ShowPartial('imgReloader')" />
    <div class="caption">
        <p>Android</p>
    </div>
</div>
<div class="col-md-4">
    <img id="image2" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" onclick="ShowPartial('image2')" />
    <div class="caption">
        <p>iOS</p>
    </div>
</div>
<div class="col-md-4">
    <img id="image3" alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" onclick="ShowPartial('image3')" />
    <div class="caption">
        <p>Windows Phone</p>
    </div>
</div>

您还需要在代码中添加three 分割标记。
为每个可以动态创建的部门标签使用正确的 id例如“您的图片 ID”+“DIV”

<div id="imgReloaderDiv" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 IMGDIV " style="display: none;"> </div>
<div id="image2Div" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 IMGDIV  " style="display: none;"> </div>
<div id="image3Div" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 IMGDIV  " style="display: none;"> </div>

"ShowPartial()" 函数应该是这样的:

<script>
function ShowPartial(ImgID) {
    $.ajax({
            cache: false,
            type: "Get",
            contentType: 'application/json',
            url: "@Url.Action("GetPartial", "your controller")",
          // send your data
            data: { firstData: "FirstValue", secondData: "SecondValue" },
            success: function (data) {
                $(".IMGDIV").slideUp();
                $("#" + ImgID + "Div").html(data);
                $("#" + ImgID + "Div").slideDown("slow");
            },
            error: function (xhr, ajaxOptions, thrownError, data) {
                alert(xhr.responseText);
            }

        });

}
</script>

在你的 Controller 中:

public ActionResult GetPartial(string firstData, string secondData)
    {
       //write needed codes
        return PartialView("_Android", model);
    }