Question

我在我的asp.net mvc项目中使用this slide show。

当我在我的页面中放置模拟数据时，它运行良好，但当我将其更改为我从控制器中获取的动态JSON数据时，它无效。

这是我简单的简单html：

 <ul class="ei-slider-large">
     <li>
        <img src="../../Product/760557822400.jpg" alt="image05" style="margin-top: 2.467px;"/>
        <div class="ei-title">
           <h2>
              <span class="productName">Dell Lat E6320 Core W7P 13.3"HD BT WC</span>
              <span class="productPrice">$110.00</span>
           </h2>
           <h3>
              <span class="productSpec">

              <br />
              Dell Latitude E6320<br />
              Processor (2.8GHz, 4M Cache)<br />

              ....
              </span>
              <span style="position:relative; left:-20px; top: -21px;"><a href="#" id="readmore">Read more</a></span>
           </h3>
      </div>
    </li>
    //there are 5 <li> in this <ul>
   </ul>

这是幻灯片的缩略图：

   <ul class="ei-slider-thumbs" style="position:relative; left:-12px;">
         <li class="ei-slider-element">Current</li>
         <li><a href="#"><span style="font-weight:bold;">DELL</span> <br /> Lat E6320 </a></li>
         <li><a href="#"><span style="font-weight:bold;">SONY</span> <br /> Lat E6320 </a></li>
         <li><a href="#"><span style="font-weight:bold;">LENOVO</span> <br /> Lat E6320 </a></li>
         <li><a href="#"><span style="font-weight:bold;">ACER</span> <br /> Lat E6320 </a></li>
         <li><a href="#"><span style="font-weight:bold;">APPLE</span><br /> Lat E6320 </a></li>
   </ul>

现在我更改了简单数据以使用我的动态数据：

 function itemSlideShow(_pictureName10,_name,_price,_notes,_id,_depID,_catID) {
    var dotString = "";
    if (_notes.length < 120) {
       dotString = "";
    } else {
       dotString = " <br/> ....";
    }
    var listSlide = '<li>' +
                '<img src="../../Product/' + _pictureName10 + '" alt="Product" width="135px"/>' +
                '<div class="ei-title"><h2>' +
                '<span class="productName">' + TrimString(_name, 80) + '<br /></span>' +
                '<span class="productPrice"> $' + formatCurrency(_price) + '</span></h2>' +
                '<h3><span class="productSpec"><br />' + TrimString(_notes, 120) + dotString + '<br /></span>' +
                '<span style="position:relative; left:-20px; top: -21px;">' +
                '<a href="Products/ProductSpec/' + _id + '?dep=' + _depID + '&cat=' + _catID + '&tab=2" style="text-decoration:none;" id="readmore">Read more</a></span></h3></div>' +
                '</li>';

   return listSlide;
 }

 var smallLi = "";
 var url = '<%: Url.Content("~/") %>' + "Home/GetNewProduct";
 $.getJSON(url, function (newProduct) {
        var contentNewProduct = $("ul.ei-slider-large");
        var smallNewProduct = $("ul.ei-slider-thumbs");
        $.each(newProduct.ja, function (index, data) {
            var smallLi = $('<li><a href="#"><span style="font-weight:bold;">' +
                                            TrimStringAddNewLine((TrimString(data.Name, 12)).toUpperCase()) +
                                            '</span><br />' +
                                            '</a></li>');
            contentNewProduct.append(itemSlideShow(data.PictureName10,data.Name,data.Price,data.Notes,data.ID,data.DepartmentID,data.CategoryID));
            smallNewProduct.append(smallLi); 
      });
  });

当我使用此jquery附加数据而不是加载数据静态时，幻灯片被幻灯片放映的loading面板卡住了。

有谁能告诉我，我在这里怎么了？

先谢谢。

Answer 1

尝试在加载完所有内容后初始化幻灯片。

我希望在$(selector).eislideshow({...});块结束后立即在$.getJASON()块内看到$.each(...);语句。

在幻灯片放映中加载数据时，Jquery无法正常工作

1 个答案: