jQuery产品显示在< div>中标签 [英] Jquery product display in <div> tag

问题描述

如果我单击product1右边的框，我会在左侧看到一些产品名称链接，有关该产品的完整说明.在这里，我使用了jQuery和html5.

My requirement left side some product name link will be there if I click product1 right box I get full desc about that product. Here I used jQuery and 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代码:

here div class="cn_page" will display 4 product first if I click the next button then the next 4 product will display. Here I get all product list all will display at time. I used this jQuery code:

$.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);
  }
});

请告诉我如何显示前四个产品div，如果单击上一个按钮时单击后四个产品，则应该显示前四个产品.

Please give me an idea of how to I can show the first 4 product divs and when I click for the next 4 products if I click on the previous button, it should show previous 4 products.

推荐答案

$.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>中标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！