单击 link 创建一个 json 对象

Question

我正在尝试使用元素内的文本创建一个 json 对象，这样我就可以对它们进行会话存储并在另一个

中使用它们

                            <div class="single-product mb-60">
                                <div class="product-img">
                                    <img src="assets/img/categori/product1.png" alt="" class='apparel_img'>
                                    <div class="new-product">
                                        <span>New</span>
                                    </div>
                                </div>
                                <div class="product-caption">
                                    <div class="product-ratting">
                                        <i class="far fa-star"></i>
                                        <i class="far fa-star"></i>
                                        <i class="far fa-star"></i>
                                        <i class="far fa-star low-star"></i>
                                        <i class="far fa-star low-star"></i>
                                    </div>
                                    <h4><a href="#" class='apparel'>Green Dress with details</a></h4>
                                    <div class="price">
                                        <ul>
                                            <li class='price'>.00</li>
                                            <li class="discount">.00</li>
                                        </ul>
                                    </div>
                                </div>
                                <div>
                                    <a href="#" onclick="myfunc()">Add to cart</a>
                            </div>

这是html。我想制作一个看起来像这样的 json 文件

var my_product = {
"img" : img_src,
"product_name" : text_inside_first_a_link,
"cost" : first_list_item_under_ul
}

在我将它放入这个对象之后，我将 sessionStorage 它们用于不同的页面以使用它并使用 html 和 appendChild

将它们添加到购物车

sessionStorage.setItem("product_detail", my_product);

编辑：我已将类添加到我需要从

中提取信息的元素

function myfunc(){
    var $items = $('.apparel, .price')
    var obj = {}
    $items.each(function() {
        obj[this.className] = $(this).text()
})

$('body').append('<br><pre>'+JSON.stringify(obj, null, ' '))}

我只用两个类试过了，但没有用。它returns一个空对象

Answer 1

你可以在你的函数中传递 this 并使用 this 你可以使用 closest() 得到 single-product div 然后只需使用 find() 以获得所需的值。

演示代码 :

function myfunc(el) {
//get closest div
  var selctor = $(el).closest('div.single-product');
  var obj = {}
  //get datas
     obj["img"] = selctor.find('img').attr('src'),
    obj["product_name"] = selctor.find(".product-caption a").text(),
    obj["cost"] = selctor.find(".price ul li:first").text()

  console.log(obj)
  //store in session
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="single-product mb-60">
  <div class="product-img">
    <img src="assets/img/categori/product1.png" alt="">
    <div class="new-product">
      <span>New</span>
    </div>
  </div>
  <div class="product-caption">
    <div class="product-ratting">
      <i class="far fa-star"></i>
      <i class="far fa-star"></i>
      <i class="far fa-star"></i>
      <i class="far fa-star low-star"></i>
      <i class="far fa-star low-star"></i>
    </div>
    <h4><a href="#">Green Dress with details</a></h4>
    <div class="price">
      <ul>
        <li>.00</li>
        <li class="discount">.00</li>
      </ul>
    </div>
  </div>
  <div>
    <!--pass this in function-->
    <a href="#" onclick="myfunc(this)">Add to cart</a>
  </div>

单击 link 创建一个 json 对象

creating a json object on clicking a link

javascript

jquery

json

session-storage