Question

我的要求左侧有一些产品名称链接将在那里，如果我点击product1右框我得到关于该产品的完整desc。在这里我使用了jQuery和html5。

<div class="cn_wrapper">            
    <div id="cn_preview" class="cn_preview">    
    <div class="cn_content" style="top:5px;">
                content1 desc
        </div>                  
    </div>      

    <div id="cn_list" class="cn_list">
        <div class="cn_page" style="display:block;">
            <div class="cn_item selected">
                <center style="vertical-align:middle"><h2 >Content 1</h2></center>
            </div>
            <div class="cn_item selected">
                <center style="vertical-align:middle"><h2 >Content 2</h2></center>
            </div>
                .
                upto 4          
        </div>

        <div class="cn_page">
            <div class="cn_item selected">
                <center style="vertical-align:middle"><h2 >Content 5</h2></center>
            </div>
            <div class="cn_item selected">
                <center style="vertical-align:middle"><h2 >Content 6</h2></center>
            </div>
            <div class="cn_item selected">
                <center style="vertical-align:middle"><h2 >Content 7</h2></center>
            </div>
            <div class="cn_item selected">
                <center style="vertical-align:middle"><h2 >Content 8</h2></center>
            </div>
        </div>

此处div class="cn_page"将首先显示4个产品，如果我点击下一个按钮，则会显示下一个4产品。这里我得到的所有产品清单都会在时间显示。我使用了这个jQuery代码：

$.ajax({
  type: "POST",
  url: "AdvService.asmx/GetDetails",
  data: "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(response) {
    var cars = response;

    $('#cn_list').empty();


    $.each(cars, function(index, MyData) {     

   $('#cn_list').append('<div class=cn_item selected><center style=vertical-align:middle><h2></h2>'+ MyData.Productname + '</center></div><div class="cn_nav">'+
                            '<a id="cn_prev" class="cn_prev disabled"></a>'+
                            '<a id="cn_next" class="cn_next"></a>'+
                            '</div>');

    });

  },

  failure: function(msg) {
    $('#cn_list').text(msg);
  }
});

请让我知道如何展示前4个产品div，如果点击上一个按钮，当我点击接下来的4个产品时，它应显示之前的4个产品。

Answer 1

如果我是你。

当你追加时，我将使用一个计数器来获取div中的前4个和id页面1，第二个div中的另外4个带有page-2和所有...

然后控制样式以显示您想要的页面。

我无法测试它，但我认为它可以工作

$.ajax({
  type: "POST",
  url: "AdvService.asmx/GetDetails",
  data: "{}",
  contentType: "application/json; charset=utf-8",
  dataType: "json",
  success: function(response) {
    var cars = response;

    $('#cn_list').empty();

    var i = 1;
    $.each(cars, function(index, MyData) {

     if (i%10 == 0) {
        $('#cn_list').append('<div class=page></div>');
     }

   $('#cn_list .page:last').append('<div class=cn_item selected><center style=vertical-align:middle><h2></h2>'+ MyData.Productname + '</center></div><div class="cn_nav">'+
                            '<a id="cn_prev" class="cn_prev disabled"></a>'+
                            '<a id="cn_next" class="cn_next"></a>'+
                            '</div>');

    i++;
    });

  },

  failure: function(msg) {
    $('#cn_list').text(msg);
  }
});

现在你只需要控制css。

Answer 2

$.ajax({
    url: "AdvService.asmx/GetDetails", type: "Post", dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (datas) {
        $('#cn_list').empty();

        $.each(datas, function (i, data) {

            if (((i + 1) % 4) == 0) {
                $('#cn_list').append('<div class="cn_page"></div>');
            }

            $('#cn_list .cn_page:last').append('<div class="cn_item selected"><center style="vertical-align:middle"><h2 >' + data.Content + '</h2></center></div>');

            i++;
        });
    },
    failure: function (msg) {
        $('#cn_list').text(msg);
    }
});

Jquery产品显示在<div>标签</div>中

2 个答案: