2

我正在使用Sidr，一个提供侧边菜单的 jQuery 插件。

我正在尝试执行以下操作：

  1. 通过 $.post() 和 json 返回从数据库中获取数据。作品

  2. 将此数据发布到我的 Sidr 菜单中。不工作！！！

当我执行脚本时会发生什么：Sidr 菜单打开，但在其中找不到var SHOPcontent内容。

我什至尝试alert(SHOPcontent)在打开 Sidr 菜单的同时运行一个。警报成功：它显示 var SHOPcontent 的内容。那么为什么 Sidr 菜单不能显示呢？

在下面查看我的代码，var SHOPcontent包含我试图通过 Sidr源选项回调放入我的 Sidr 菜单的一堆 html 。

     product_tags.click(function() {

        $.sidr('toggle', 'shop_bar');               

        $.post("display_products_2.php", {'product_title_selected': product_title_selected}, function(display_shop) {

        var shop_array = $.parseJSON(display_shop);


        for ( c = 0; c <shop_array.length; c++)

                  {
                    var one_color =  "<div style='background-color:" + shop_array[c][3] + "'" + "class='one_color'></div>" 

                    var product_colors = product_colors + one_color;

                   }; 


        var one_color = "";

        var SHOPcontent =

                "<div id='shop_bar'>" +

                "<div style='background-color:" + shop_array[0][3] + "'" + "id='shop_translucent_banner'></div>" +

                "<div id='shop_title'>" +

                "<span id='shop_brand'>" +

                 shop_array[0][2] +

                "</span>" +

                shop_array[0][4] +

                "</div>" +

                "<div id='shop_price'>" +

                shop_array[0][6] +

                "</div>" +

                "<div id='shop_picture'>" + 

                "<img src='" + "product_pictures/" + shop_array[0][9] + "'>" +

                "</div>" +

                "<div id='shop_description'>" +

                shop_array[0][5] +

                "</div>" +

                "<div id='more_product_information'>MORE INFORMATION</div>" +

                "<div id='shop_colors'>" +

                product_colors +

                "</div>" +

                "<div id='buy'>Buy</div>"  +

                "</div>"  ;

         });


   $('#shop_bar').sidr( {

                displace: false,
                name: 'shop_bar',
                source: function() {

                $('.sidr').html(SHOPcontent)

                } 

          });

寻求帮助以指出我的代码有什么问题。

4

2 回答 2

0

因为该sidr函数是从函数外部调用的post success，所以sidr没有启动。试试下面的。确保这是$(document).ready()正常的。

product_tags.click(function() {

  $.sidr('toggle', 'shop_bar');

  $.post("display_products_2.php", {
      'product_title_selected': product_title_selected
  }, function(display_shop) {
        var shop_array = $.parseJSON(display_shop);
        for (c = 0; c < shop_array.length; c++){
            var one_color = "<div style='background-color:" + shop_array[c][3] + "'" + "class='one_color'></div>"
            var product_colors = product_colors + one_color;
        };
        var one_color = "";
        var SHOPcontent = 
            "<div id='shop_bar'>" +
                "<div style='background-color:" + shop_array[0][3] + "'" + "id='shop_translucent_banner'></div>" +
                "<div id='shop_title'>" +
                    "<span id='shop_brand'>" +
                        shop_array[0][2] +
                    "</span>" +
                    shop_array[0][4] +
                "</div>" +
                "<div id='shop_price'>" +
                    shop_array[0][6] +
                "</div>" +
                "<div id='shop_picture'>" +
                    "<img src='" + "product_pictures/" + shop_array[0][9] + "'>" +
                "</div>" +
                "<div id='shop_description'>" +
                    shop_array[0][5] +
                "</div>" +
                "<div id='more_product_information'>MORE INFORMATION</div>" +
                "<div id='shop_colors'>" +
                    product_colors +
                "</div>" +
                "<div id='buy'>Buy</div>" +
            "</div>";

        $('#shop_bar').sidr({
          displace: false,
          name: 'shop_bar',
          source: function() {
            $('.sidr').html(SHOPcontent)
          }
        });
    });
});
于 2015-08-13T18:02:37.400 回答
0

我认为您的问题是，当您通过回调注入内容时，您必须返回所述内容，如下所示：

HTML：

<button id="menu-toggle">Sidr me</button>

JS：

$('#menu-toggle').sidr({
    name: 'sidr-menu',
    source: function (name) {
        return '<h1>' + name + '</h1><ul>' +
            '<li>Foo</li>' +
            '<li>Bar</li>' +
            '<li>Baz</li>' +
           '</ul>';
    }
});

小提琴：

http://jsfiddle.net/tt8zjc79/2/

所以在你的情况下尝试重写回调如下：

$('#shop_bar').sidr({
    displace: false,
    name: 'shop_bar',
    source: function () {
        return SHOPcontent;
    }
});
于 2015-08-14T12:09:38.713 回答