javascript - 使用 Entity Framework 和 Jquery 在同一 View 中从右向左传递数据的图片库

Question

我想知道我的代码做错了什么？

我想将数据从右侧发送到左侧(主体)。

我可以做到，但我的图库图像有问题。

这是问题的 View (选择了 id = 2 的第二条新闻)，其中图像库中的最后一张图像重复了 3 次(id = 2 只有 2 张图像，而不是 3 张，其中仅显示图像名称为 2_1)。

这是我的控制台，当我单击每个新闻和代码时，它会显示数据。

var items = $(e).siblings(".imgRuta"); //the .class called "imgRuta" is hidden in the right side.
    for (var i = 0; i < items.length; i++) 
    {
       console.log(items[i].value);
       $("img[id^='currentgalleryImagen']").attr("src", items[i].value);
    }

这就是我在左侧显示图片库的方式(主要)。

<div class="noti_P">
  <p id="currentprincipalContenido">@principalContenido</p>
  @{int i = 1;}
  @foreach (var n in Model)
  {   
     foreach (var img in n.Noticias2)
     {
       if (img.Nombre.Contains(principalId + "_"))
       {
         <a href="@img.Ruta@img.Nombre@img.Extension" rel="prettyPhoto[gallery1]"><img id="@("currentgalleryImagen"+i)" src="@img.Ruta@img.Nombre@img.Extension" width="100px" height="100px"/></a>
         i++;
       }
     }
  }
</div>

这就是我获取右侧隐藏数据的方法

@{ var j = 0;}
@foreach (var img in n.Noticias2)
{
   var imgRuta = @img.Ruta + @img.Nombre + @img.Extension;
   <input class="Descripcion" type="hidden" value="@img.Descripcion" />
   <input class="imgRuta" type="hidden" value="@imgRuta" id="imagen_@j" />
   j++;
}

这是我的完整 View 代码。

@model PagedList.IPagedList<IntranetCorporativa.Model.Noticias>
@using PagedList.Mvc;
@{
    var format = "dddd, MMMM dd, yyyy"; 
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
    int principalId = Model[0].IdNoticia; 
    string principalTitulo = Model[0].Titulo; 
    string principalContenido = Model[0].Contenido;
    DateTime principalFechaDesde = Convert.ToDateTime(Model[0].FeDesde);
    DateTime principalFechaHasta = Convert.ToDateTime(Model[0].FeHasta);
}

<script type="text/javascript">    //Script usado para enviar la data del lado derecho al izquierdo.
    function changeDisplay(e) {

        var principalTitulo = $(e).text();
        var principalContenido = $(e).siblings(".Contenido:first").val();
        var principalId = $(e).siblings(".IdNoticia:first").val();
        var principalFechaDesde = $(e).siblings(".FeDesde:first").val();
        var principalFechaHasta = $(e).siblings(".FeHasta:first").val();
        var principalDescripcion = $(e).siblings(".Descripcion:first").val();
        var principalImagen = $(e).siblings(".imgRuta:first").val();
        var galleryImagen = $(e).siblings(".imgRuta").val();


        var items = $(e).siblings(".imgRuta");

        for (var i = 0; i < items.length; i++) {
            console.log(items[i].value);
            $("img[id^='currentgalleryImagen']").attr("src", items[i].value);
        }


        $("#currentprincipalTitulo").html(principalTitulo);
        $("#currentprincipalContenido").html(principalContenido);
        $("#currentprincipalId").html(principalId);
        $("#currentprincipalFechaDesde").html(principalFechaDesde);
        $("#currentprincipalFechaHasta").html(principalFechaHasta);
        $("#currentprincipalDescripcion").html(principalDescripcion);
        $("#currentprincipalImagen").attr("src", principalImagen);

    }

</script>


<style> /* This is only a Style */
    .uppercase {
        text-transform: uppercase;
    }

    .limit {
        text-overflow: ellipsis;
        word-wrap: break-word;
        overflow: hidden;
        max-height: 3em;
        line-height: 1.7em;
    }

</style>



<!-- Principal o Lado Izquierdo -->
<div class="col-md-12 main">

    <div class="header sec-title-hd">
        <div class="bg-calendar"></div>
        <div class="col-md-7">
            <h5 class="pull-left">NOTICIAS</h5>
            <div>
                <a href="dashboard.html" class="btn sky-blue n-radius-b"> <img src="slider/img/arrow-left.png"> VOLVER</a>
            </div>
        </div>
    </div>

    <div class="content-inter">
        <div class="container-fluid sec-title-hd-sub">
            <div class="row">
                <div class="col-md-7">
                    <div>
                        <figure class="img_N">
                            @foreach (var n in Model) // Accesar a la data de Noticias
                            {
                                var img = n.Noticias2.FirstOrDefault();
                                if (img != null && img.Nombre.Equals(principalId + "_0"))
                                {
                                    <img id="currentprincipalImagen" src="@img.Ruta@img.Nombre@img.Extension" class="img-responsive" alt="@img.Nombre" />
                                    <figcaption>
                                        <p id="currentprincipalDescripcion">@img.Descripcion</p>
                                    </figcaption>
                                }
                            }
                        </figure>
                    </div>
                    <div class="textnota">
                        <br>
                        <h6 id="currentprincipalId">@principalId</h6>
                        <h5 id="currentprincipalTitulo" class="titulo_N uppercase">@principalTitulo</h5>
                        <p id="currentprincipalFechaDesde" class="time">Desde: @principalFechaDesde.ToString(format)</p>
                        <p id="currentprincipalFechaHasta" class="time">Hasta: @principalFechaHasta.ToString(format)</p>
                        <div class="noti_P">
                            <p id="currentprincipalContenido">@principalContenido</p>
                            @{int i = 1;}
                            @foreach (var n in Model)
                            {   

                                foreach (var img in n.Noticias2)
                                {
                                    if (img.Nombre.Contains(principalId + "_"))
                                    {

                                      <a href="@img.Ruta@img.Nombre@img.Extension" rel="prettyPhoto[gallery1]"><img id="@("currentgalleryImagen"+i)" src="@img.Ruta@img.Nombre@img.Extension" width="100px" height="100px"/></a>
                                        i++;
                                    }
                                }
                            }
                        </div>
                    </div>
                </div>
                <div class="col-md-5">
                    <!-- Lista de Noticias del lado Derecho -->
                    @foreach (var n in Model)
                    {
                        <!-- Data mostrada -->
                        <blockquote class="blockquote-nopadding bg-calendar-border-left">
                            <p class="time_f">@n.FeDesde.ToString(format)</p>
                            <a href="#" onclick="changeDisplay(this)" class="titulo_N">@n.Titulo</a>
                            <p class="text-justify limit">@n.Contenido</p>

                            <!--Data Oculta que es Enviada al lado Izquierdo-->
                            <input class="IdNoticia" type="hidden" value="@n.IdNoticia" />
                            <input class="Contenido" type="hidden" value="@n.Contenido" />
                            <input class="FeDesde" type="hidden" value="Desde: @n.FeDesde.ToString(format)" />
                            <input class="FeHasta" type="hidden" value="Hasta: @n.FeHasta.ToString(format)" />
                            @{ var j = 0;}
                            @foreach (var img in n.Noticias2)
                            {
                                var imgRuta = @img.Ruta + @img.Nombre + @img.Extension;
                                <input class="Descripcion" type="hidden" value="@img.Descripcion" />
                                <input class="imgRuta" type="hidden" value="@imgRuta" id="imagen_@j" />
                                j++;
                            }

                        </blockquote>

                    } 
                    <!-- Paginacion usando Libreria PagedList -->
                    Págnia @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) de @Model.PageCount
                    @Html.PagedListPager(Model, page => Url.Action("Index", new { page }))
                </div>
            </div>
        </div>
    </div>
</div>

谢谢。

Answer 1

我认为您只是更改左侧图库中已有标签上的图像src。那么，如果有三张图片而您只想显示新 ID 中的两张怎么办？使用此代码，您应该能够从零重新创建图库图像。

不要忘记重新初始化prettyPhoto，正如我在下面的代码中评论的那样。

function changeDisplay(e) {
  var el= $(e).closest('blockquote');
  var principalTitulo = $(e).text();
  var principalContenido = el.find(".Contenido:first").val();
  var principalId = el.find(".IdNoticia:first").val();
  var principalFechaDesde = el.find(".FeDesde:first").val();
  var principalFechaHasta = el.find(".FeHasta:first").val();
  var principalDescripcion = el.find(".Descripcion:first").val();
  var principalImagen = el.find(".imgRuta:first").val();
  var galleryImagen = el.find(".imgRuta").val();

  // delete the images that are already in the left side
  $('.noti_P a').remove();

  el.find(".imgRuta").each(function(){
    var imgSrc=$(this).val();
    console.log(imgSrc);

    // create the image for the left side
    var photoLink=$('<a>',{rel:'prettyPhoto[gallery1]',href:imgSrc});
    var imgTag=$('<img />',{src:imgSrc,width:'100px',height:'100px'});

    // put the created tags to the gallery in the left
    $('.noti_P').append(photoLink.append(imgTag));  
  }

  // here you should reinitialize your prettyPhoto[gallery1] but please check it
  $("a[rel='prettyPhoto[gallery1]']").prettyPhoto();

  $("#currentprincipalTitulo").html(principalTitulo);
  $("#currentprincipalContenido").html(principalContenido);
  $("#currentprincipalId").html(principalId);
  $("#currentprincipalFechaDesde").html(principalFechaDesde);
  $("#currentprincipalFechaHasta").html(principalFechaHasta);
  $("#currentprincipalDescripcion").html(principalDescripcion);
  $("#currentprincipalImagen").attr("src", principalImagen);
}