单击链接创建 json 对象

Question

我正在尝试使用元素内的文本创建一个 json 对象，以便我可以 sessionStorage 它们并在另一个中使用它们

                            <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'>$40.00</li>
                                            <li class="discount">$60.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
}

在我把它放入这个对象之后，我会将它们保存到不同的页面以使用它，并使用 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, ' '))}

我只尝试了两个类，但不起作用。它返回一个空对象

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>$40.00</li>
        <li class="discount">$60.00</li>
      </ul>
    </div>
  </div>
  <div>
    <!--pass this in function-->
    <a href="#" onclick="myfunc(this)">Add to cart</a>
  </div>