Question

在我的项目中，我有一个JSON文件。我在带有ul，“inner”的div下显示在列表（class）内解析的数据，并且只显示您在我的JSON中可以看到的每个产品的名称和成本。

{
 "product": [
  {
   "name": "samsung galaxy",
   "image": "https://rukminim1.flixcart.com/image/832/832/mobile/v/z/x/samsung-galaxy-on-nxt-sm-g610fzdgins-original-imaenkzvmnyf7sby.jpeg?q=70",
   "cost": "RS.10,000",
   "detail": "Flaunt your style with the Samsung Galaxy On Nxt. Featuring a drool-worthy body and impressive features, this smartphone is built to perform. Talk to your mom, chat with your friends, browse the Internet - stay connected the way that suits you best - this smartphone is powerful enough to keep up with your busy lifestyle."
  }
 ]
}

当我点击第一个产品（第一个列表项）时，我想在同一个JSON对象的另一个页面中显示该产品的详细信息（值详细信息）;当我点击第二个产品时，我希望它也显示在不同的页面中，也可以显示在同一个对象中。

这是我的HTML：

<html>
    <head>
        <title>jquery</title>
    </head>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

            <script type="text/javascript">


$.ajax({
     url: 'http://sonsofthunderstudio.in/jj/product.json',
     dataType: 'jsonp',
     jsonpCallback: 'jsonCallback',
     type: 'get',
     crossDomain : true,
     cache: false,
     success: function(data) {
        $(data.product).each(function(index, value) {
            console.log(value);
                $( ".inner" ).append("<li>"+value.name+"<img src='" + value.image + "'  width='50px' height='50px' / >"+value.cost+"</li>");  
        });
     }
});


</script>


        <div class="inner">
        </div>
    </body>
</html>

我可以从哪里离开？

Answer 1

您可以在li上添加onclick事件并调用一个函数，该函数将特定细节存储在localStorage中。在下一页上，您可以从localStorage访问详细信息并显示它。

//--[Appending in your code]--
.
.
.
 $(data.product).each(function(index, value) {
        console.log(value);
            $( ".inner" ).append("<li onclick='foo('"+value.detail+"')'>"+value.name+"<img src='" + value.image + "'  width='50px' height='50px' / >"+value.cost+"</li>");  
    });

<script type="text/javascript">
 function foo(detail)
 {
   localStorage.setItem("DETAIL",detail);
 }
</script>


//--[On second page]--
<head>
  <script type="text/javascript">
   var detail = localStorage.getItem("DETAIL");
   $("#details").html(detail);
 </script>
</head>
<body>
 <div id="details"></div>
</body>

Answer 2

首先添加数据时，您需要添加Identifier，因为您需要区分元素，并且需要将onClick添加到要添加的每个元素中这样说：'<li id="'+ index +'" onClick="clicklist(this)">'+ value.name (...) +'</li>'
您需要声明的第二件事是一个名为clicklist的函数或带有param元素的函数。 function clicklist(element) { } 填写我现在要解释的代码：
您可以使用jQuery函数通过元素访问列表数据。首先，您可以使用var id = $(element).attr('id');获取ID，然后您可以找到列表元素并使用var itemname = $(element).find("typeofelement.class").attr('value');等获取值...
当您获得列表中的所有数据时，您需要打开一个新窗口，其中包含您在函数中获得的参数。然后使用此代码：

//Add all the values you need in the other html (id and values) So repeat this line: sessionStorage.setItem("ID", id); //Open the window window.open("yourother.html","_blank");

这是一种简单的方法。

Answer 3

当您想要显示产品的详细信息时，您必须创建一个＆＃34; ProductList.html＆＃34;显示您的产品列表，并创建一个＆＃34; ProductDetail.html＆＃34;根据所选产品显示产品详细信息。当用户点击产品时，您必须将所选产品传递给＆＃34; ProductDetail.html＆＃34;通过网址并在该页面中获取它。 2＆＃34; encodeURIComponenet（）＆＃34;和＆＃34; decodeURIComponent（）＆＃34;是javascript定义的函数，使这个动作编码和安全。

要实现这一目标，您必须在$（＆＃34; .inner＆＃34;）附加＆＃34;链接＆＃34;（A标签）：

$(".inner").append("<a href='#'>"+value.name+"</a>");

在上面的代码中，您创建了一个链接，将产品ID传递到目标页面，在下面的代码中，您设置了＆＃34; href＆＃34;链接的属性：

var _SelectedProduct = "ID=" + ProductID;
var _EncodeID = encodeURIComponenet(_SelectedProduct);
document.getElementById("YourLink").href = "ProductDetail.html?" + _EncodeID;

使用这些代码，当用户点击某个产品时，他将被重定向到＆＃34; ProductDetail.html＆＃34;使用所选的产品ID。您可以在ProductDetail.js中获取此ID：

var _DecodeURL = decodeURIComponent(window.location);
var ID = _DecodeURL.split("=");
var _ProductID = ID[1];

使用这些代码，您可以在（＆＃34; =＆＃34;）上拆分传递的网址，这意味着您将获得传递的产品ID。（_ ProductID）。并且：

for(i=0;i<=product.lenght; i++){
if(product[i].ID == _ProductID){ ... }
}

从JSON

3 个答案: