Question

我正在尝试开发一个应用程序，当用户搜索手机时，他们会获得一些结果。我输入三星，我会得到一堆三星手机，它会显示手机名称和图片等信息。将有一个＆＃34;更多信息＆＃34;按钮朝下。这将通过JavaScript和外部JSON文件完成。

当用户点击“更多信息”按钮时，应将其带到显示该手机所有相关信息的新页面。

我不知道怎么做最后一部分。

JSON：

  [
      { "name":"Samsung Galaxy S6 Edge+",
        "year":2015,
        "manufacture":"Samsung",
        "description":"Samsung Galaxy S6 Edge+ is an Android smartphone manufactured and marketed by Samsung Electronics. The S6 line serves as a successor to the Galaxy S5. The S6 and S6   Edge smartphones were officially unveiled in the first Samsung Unpacked 2015 event at Mobile World Congress on 1 March 2015, while the bigger S6 Edge+ was officially unveiled together with the Samsung Galaxy Note 5 in the second Samsung Unpacked 2015 event at New York on 13 August 2015. Alongside the S6, Samsung also unveiled the S6 Edge (and later on the bigger S6 Edge+), a variant whose screen is wrapped along the sides of the device; the curvature is usable for several additional features. The Galaxy S6 and S6 Edge were released on 10 April 2015 in 20 countries while the S6 Edge+ was released on 21 August 2015 in 20 countries.",
        "avatar": "https://images.carphonewarehouse.com/is/image/cpw/mobiles/medium/SAMSUNG-GALAXY-S6-EDGE-PLUS-32GB_GOLD_1?wid=232&hei=348",
        "lat": 53.645792,
        "lng":  -1.785035,
        "imgPath": "assets/img/s6Edge+.jpg"},
 ]

Javascript：

    $(window).load(function(){
    $('#search').keyup(function(){
        var searchField = $('#search').val();
        var regex = new RegExp(searchField, "i");
        var output = '<div class="row">';
        var count = 1;
        var error = "";
        $.getJSON('assets/js/phones.json', function(data) {
          $.each(data, function(key, val){                
           if ((val.name.search(regex) != -1))       {
              output += '<div class="col-md-6 well">';
              output += '<div class="col-md-3"><img class="img-responsive" src="'+val.imgPath+'"/></div>';
              output += '<div class="col-md-7">';
              output += '<h5>' + val.name + '</h5>';
              output += '<h5><a href=""> More Info</a></h5>';
              output += '</div>';
              output += '</div>';
              if(count%2 == 0){
                output += '</div><div class="row">'
              }
              count++;
              }
          });
if (searchField === "") {
    return false;
} 
          output += '</div>';
          $('#results').html(output);
        });
    });
  });

任何直接的帮助都会非常值得注意。感谢。

Answer 1

我没有看到您提供的示例JSON链接，详细页面链接应该是什么？你有这个吗？如果是这样，你可以设置href =＆＃34;＆＃34;更多信息是它。

假设您在JSON中有一个带有完整链接的属性，例如

[
      { 
        "name":"Samsung Galaxy S6 Edge+",
        ...
        "link": "/myrelativelink_to_produt.html"
        },
 ]

您可以使用以下链接更改JS行：

 output += '<h5><a href="' + val.link + '"> More Info</a></h5>';

如果你没有链接，你可能不得不用显示产品细节所需的任何数据来构建它，我无能为力。

但提示是设置a标签的href，它甚至可能是三星网站的链接：）

希望这有帮助， P上。

Answer 2

First Thing：在每个手机的JSON对象中传递一些唯一ID。 Second Thing：如果您只想显示手机名称，则无需在主页中获取所有数据。只需从api获得name和[ { "id":"1", "name":"Samsung Galaxy S6 Edge+" }, { "id":"2", "name":"Samsung Galaxy S5" }, { "id":"3", "name":"Samsung Galaxy S3" }]。

主页JSON：

id

第三件事：点击more info选项后，将此特定[ { "year":2015, "manufacture":"Samsung", "description":"Samsung Galaxy S6 Edge+ is an Android smartphone manufactured and marketed by Samsung Electronics. The S6 line serves as a successor to the Galaxy S5. The S6 and S6 Edge smartphones were officially unveiled in the first Samsung Unpacked 2015 event at Mobile World Congress on 1 March 2015, while the bigger S6 Edge+ was officially unveiled together with the Samsung Galaxy Note 5 in the second Samsung Unpacked 2015 event at New York on 13 August 2015. Alongside the S6, Samsung also unveiled the S6 Edge (and later on the bigger S6 Edge+), a variant whose screen is wrapped along the sides of the device; the curvature is usable for several additional features. The Galaxy S6 and S6 Edge were released on 10 April 2015 in 20 countries while the S6 Edge+ was released on 21 August 2015 in 20 countries.", "avatar": "https://images.carphonewarehouse.com/is/image/cpw/mobiles/medium/SAMSUNG-GALAXY-S6-EDGE-PLUS-32GB_GOLD_1?wid=232&hei=348", "lat": 53.645792, "lng": -1.785035, "imgPath": "assets/img/s6Edge+.jpg"}, ]手机传递到下一页，然后根据该ID获取来自api的所有信息与该ID相关联的手机。

JSON应该是这样的：

 class Menu

  def initialize menu =  { pepperoni: 50, vegetariana: 50, mexicana: 50, deluxe: 100 }
    @list = menu
  end


  def show_price item
    item = ":" + "#{item}"
    list[item]
  end


  attr_reader :list

end

详细信息页面JavaScript到JSON

2 个答案: