为您的购物车制作快速浏览模式

Question

请用asp.net核心mvc和jquery制作购物车。我将项目放入foreach循环中，以将网格中的所有项目以及其他信息显示到@ Html.Hidden（“ Description”，（object）item.Description）中。我创建了一个快速查看按钮，以弹出该产品的更多详细信息。我面临的挑战是，当我单击快速查看时，我希望能够查看所选产品的详细信息。当使用以下代码单击任何项​​目的快速查看时，我已经能够获得产品的图像：

var selectedImage = $(this).parent('.hov-img0').find('img:first');
var slectedImageUrl = selectedImage.attr('src');

除了图像，我一直很难获得其他属性，例如价格，说明，替代图像等，这些属性都在隐藏字段中。请在下面检查我的代码：

<div class="row isotope-grid">
        @if (ViewBag.AllProducts != null)
        {
            foreach (var item in ViewBag.AllProducts)
            {
                var photoPath4 = "~/images/" + (@item.PicPathMain ?? "placehold.jpg");

                <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item women">
                    <!-- Block2 -->
                    <div class="block2">
                        <div class="block2-pic hov-img0">
                            <img src=@photoPath4 id="imgPix2" alt="IMG-PRODUCT" asp-append-version="true" />

                            <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
                                Quick View
                            </a>
                        </div>

                        <div class="block2-txt flex-w flex-t p-t-14">
                            <div class="block2-txt-child1 flex-col-l ">
                                <a href="@Url.Action("ProductDetail", new { ID = item.ID })" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                    @item.Name
                                </a>

                                @Html.Hidden("Image1", (object)item.PicPathMain)
                                @Html.Hidden("Image2", (object)item.PicPathLeft)
                                @Html.Hidden("Image3", (object)item.PicPathRight)
                                @Html.Hidden("Description", (object)item.Description)
                                @Html.Hidden("Price", (object)item.Price)
                                @Html.Hidden("Size", (object)item.Size)
                                @Html.Hidden("ProdName", (object)item.Name)
                                <span class="stext-105 cl3">
                                    N @item.Price
                                </span>
                            </div>

                            <div class="block2-txt-child2 flex-r p-t-3">
                                <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
                                    <img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
                                    <img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            }
        }


    </div>

这是我的jquery代码

$('.js-show-modal1').on('click',function(e){
    e.preventDefault();
    $('.js-modal1').addClass('show-modal1');
    //Get Product Image
    var selectedImage = $(this).parent('.hov-img0').find('img:first');
    var slectedImageUrl = selectedImage.attr('src');
    $('#imgPic1').attr('src', slectedImageUrl);

    //Get Product Name
    var productName = $(this).parent('.hov-img0').find('input[name="ProdName"]');
    var selectedName = productName.attr('value');
    $('.mtext-105').html(selectedName);
});

更新：请检查下方呈现的HTML表格。谢谢

<div class="row isotope-grid" style="position: relative; height: 890px;">
                <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item women" style="position: absolute; left: 0%; top: 0px;">
                    <!-- Block2 -->
                    <div class="block2">
                        <div class="block2-pic hov-img0">
                            <img src="/images/476cd102-95e4-406e-b4b1-bc24ff56c08a_73_AFRO1_L.jpg?v=clql7fMRxRm6EOgTPdinW74B9xv6lFre36t5VFvywJk" id="imgPix2" alt="IMG-PRODUCT">

                            <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
                                Quick View
                            </a>
                        </div>

                        <div class="block2-txt flex-w flex-t p-t-14">
                            <div class="block2-txt-child1 flex-col-l ">
                                <a href="/Home/ProductDetail/1" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                    AFRO KINKY
                                </a>

                                <input id="Image1" name="Image1" type="hidden" value="476cd102-95e4-406e-b4b1-bc24ff56c08a_73_AFRO1_L.jpg">
                                <input id="Image2" name="Image2" type="hidden" value="17a7303e-6d2f-44d7-bc2c-7516a04311c4_DSS-620-X-600-1.jpg.pagespeed.ce.4HxAdKZ6OR.jpg">
                                <input id="Image3" name="Image3" type="hidden" value="f3914b31-337b-4a16-bb21-9e49e0f8c343_ed1.jpg">
                                <input id="Description" name="Description" type="hidden" value="ROSA">
                                <input id="Price" name="Price" type="hidden" value="15000.00">
                                <input id="Size" name="Size" type="hidden" value="14">
                                <input id="ProdName" name="ProdName" type="hidden" value="AFRO KINKY">
                                <span class="stext-105 cl3">
                                    N 15000.00
                                </span>
                            </div>

                            <div class="block2-txt-child2 flex-r p-t-3">
                                <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
                                    <img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
                                    <img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item women" style="position: absolute; left: 50%; top: 0px;">
                    <!-- Block2 -->
                    <div class="block2">
                        <div class="block2-pic hov-img0">
                            <img src="/images/5d7e96c5-2c01-4f3f-9cfa-09f327aab817_model-model-remy-dream-weaver-dream-weaver-yaky-10.jpg?v=g2USmv3vBYuLBjEOKra5zavJnxo_4CoMlz8LtDl8hLQ" id="imgPix2" alt="IMG-PRODUCT">

                            <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
                                Quick View
                            </a>
                        </div>

                        <div class="block2-txt flex-w flex-t p-t-14">
                            <div class="block2-txt-child1 flex-col-l ">
                                <a href="/Home/ProductDetail/2" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                    LACE WIG
                                </a>

                                <input id="Image1" name="Image1" type="hidden" value="5d7e96c5-2c01-4f3f-9cfa-09f327aab817_model-model-remy-dream-weaver-dream-weaver-yaky-10.jpg">
                                <input id="Image2" name="Image2" type="hidden" value="">
                                <input id="Image3" name="Image3" type="hidden" value="">
                                <input id="Description" name="Description" type="hidden" value="HAIR DOM">
                                <input id="Price" name="Price" type="hidden" value="16000.00">
                                <input id="Size" name="Size" type="hidden" value="15">
                                <input id="ProdName" name="ProdName" type="hidden" value="LACE WIG">
                                <span class="stext-105 cl3">
                                    N 16000.00
                                </span>
                            </div>

                            <div class="block2-txt-child2 flex-r p-t-3">
                                <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
                                    <img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
                                    <img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item women" style="position: absolute; left: 0%; top: 445px;">
                    <!-- Block2 -->
                    <div class="block2">
                        <div class="block2-pic hov-img0">
                            <img src="/images/ed347c52-e1ab-4059-9207-742c04f6d242_KZ6OR.jpg?v=lLlRsUR3vXeV76vghx52VY8HicpXGNKpVTSFurOtleM" id="imgPix2" alt="IMG-PRODUCT">

                            <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
                                Quick View
                            </a>
                        </div>

                        <div class="block2-txt flex-w flex-t p-t-14">
                            <div class="block2-txt-child1 flex-col-l ">
                                <a href="/Home/ProductDetail/3" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                    LACE WIG
                                </a>

                                <input id="Image1" name="Image1" type="hidden" value="ed347c52-e1ab-4059-9207-742c04f6d242_KZ6OR.jpg">
                                <input id="Image2" name="Image2" type="hidden" value="">
                                <input id="Image3" name="Image3" type="hidden" value="">
                                <input id="Description" name="Description" type="hidden" value="HAIR DOM">
                                <input id="Price" name="Price" type="hidden" value="22500.00">
                                <input id="Size" name="Size" type="hidden" value="15">
                                <input id="ProdName" name="ProdName" type="hidden" value="LACE WIG">
                                <span class="stext-105 cl3">
                                    N 22500.00
                                </span>
                            </div>

                            <div class="block2-txt-child2 flex-r p-t-3">
                                <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
                                    <img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
                                    <img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item women" style="position: absolute; left: 50%; top: 445px;">
                    <!-- Block2 -->
                    <div class="block2">
                        <div class="block2-pic hov-img0">
                            <img src="/images/e72f6dd5-a2f1-448f-abf6-a3ed08547bb7_ed6.jpg?v=wnPvcpEnY7CmfOZbwzVKf2sfZqeGOUdx0znVbL9RHsU" id="imgPix2" alt="IMG-PRODUCT">

                            <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
                                Quick View
                            </a>
                        </div>

                        <div class="block2-txt flex-w flex-t p-t-14">
                            <div class="block2-txt-child1 flex-col-l ">
                                <a href="/Home/ProductDetail/4" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                    RED ROSES
                                </a>

                                <input id="Image1" name="Image1" type="hidden" value="e72f6dd5-a2f1-448f-abf6-a3ed08547bb7_ed6.jpg">
                                <input id="Image2" name="Image2" type="hidden" value="">
                                <input id="Image3" name="Image3" type="hidden" value="">
                                <input id="Description" name="Description" type="hidden" value="HAIR DOM">
                                <input id="Price" name="Price" type="hidden" value="17000.00">
                                <input id="Size" name="Size" type="hidden" value="15">
                                <input id="ProdName" name="ProdName" type="hidden" value="RED ROSES">
                                <span class="stext-105 cl3">
                                    N 17000.00
                                </span>
                            </div>

                            <div class="block2-txt-child2 flex-r p-t-3">
                                <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
                                    <img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
                                    <img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>


    </div>

Answer 1

您可以这样做。请注意，您尚未为模式添加HTML，因此将结果写入其中的类名称仅是示例，您必须对其进行调整。另请注意，您的HTML无效，因为您使用重复的ID，而ID必须是唯一的。可能不需要使用诸如Image1，Image2之类的ID，因为所有输入也都具有具有相同值的name属性。

$('.js-show-modal1').on('click', function(e) {
  e.preventDefault();
  $('.js-modal1').addClass('show-modal1');

  var selectedImage = $(this).parent('.hov-img0').find('img:first');
  var selectedImageUrl = selectedImage.attr('src');
  $('#imgPic1').attr('src', selectedImageUrl);

  var productName = $(this).parent('.hov-img0').next(".block2-txt").find('input[name="ProdName"]');
  var selectedName = productName.attr('value');
  $('.mtext-105').html(selectedName);

  var productPrice = $(this).parent('.hov-img0').next(".block2-txt").find('input[name="Price"]');
  var selectedPrice = productPrice.attr('value');
  $('.mtext-106').html(selectedPrice);
  
  var productDescription = $(this).parent('.hov-img0').next(".block2-txt").find('input[name="Description"]');
  var selectedDescription = productDescription.attr('value');
  $('.mtext-107').html(selectedDescription);

  var productSize = $(this).parent('.hov-img0').next(".block2-txt").find('input[name="Size"]');
  var selectedSize = productSize.attr('value');
  $('.mtext-107').html(selectedSize);

  var selectedImage2 = $(this).parent('.hov-img0').next(".block2-txt").find('input[name="Image2"]');
  var selectedImage2Url = selectedImage2.attr('value');
  $('#imgPic2').attr('src', selectedImage2Url);

  var selectedImage3 = $(this).parent('.hov-img0').next(".block2-txt").find('input[name="Image3"]');
  var selectedImage3Url = selectedImage3.attr('value');
  $('#imgPic3').attr('src', selectedImage3Url);
  
   console.log("Product Name: " + selectedName);
   console.log("Product Image: " + selectedImageUrl);
   console.log("Product Price: " + selectedPrice);
   console.log("Product Size: " + selectedSize);
   console.log("Product Description: " + selectedDescription);
   console.log("Product Image 2: " + selectedImage2Url);
   console.log("Product Image 3: " + selectedImage3Url);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row isotope-grid" style="position: relative; height: 890px;">
  <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item women" style="position: absolute; left: 0%; top: 0px;">
    <!-- Block2 -->
    <div class="block2">
      <div class="block2-pic hov-img0">
        <img src="/images/476cd102-95e4-406e-b4b1-bc24ff56c08a_73_AFRO1_L.jpg?v=clql7fMRxRm6EOgTPdinW74B9xv6lFre36t5VFvywJk" id="imgPix2" alt="IMG-PRODUCT">

        <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
          Quick View
        </a>
      </div>

      <div class="block2-txt flex-w flex-t p-t-14">
        <div class="block2-txt-child1 flex-col-l ">
          <a href="/Home/ProductDetail/1" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
            AFRO KINKY
          </a>

          <input id="Image1" name="Image1" type="hidden" value="476cd102-95e4-406e-b4b1-bc24ff56c08a_73_AFRO1_L.jpg">
          <input id="Image2" name="Image2" type="hidden" value="17a7303e-6d2f-44d7-bc2c-7516a04311c4_DSS-620-X-600-1.jpg.pagespeed.ce.4HxAdKZ6OR.jpg">
          <input id="Image3" name="Image3" type="hidden" value="f3914b31-337b-4a16-bb21-9e49e0f8c343_ed1.jpg">
          <input id="Description" name="Description" type="hidden" value="ROSA">
          <input id="Price" name="Price" type="hidden" value="15000.00">
          <input id="Size" name="Size" type="hidden" value="14">
          <input id="ProdName" name="ProdName" type="hidden" value="AFRO KINKY">
          <span class="stext-105 cl3">
            N 15000.00
          </span>
        </div>

        <div class="block2-txt-child2 flex-r p-t-3">
          <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
            <img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
            <img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item women" style="position: absolute; left: 50%; top: 0px;">
    <!-- Block2 -->
    <div class="block2">
      <div class="block2-pic hov-img0">
        <img src="/images/5d7e96c5-2c01-4f3f-9cfa-09f327aab817_model-model-remy-dream-weaver-dream-weaver-yaky-10.jpg?v=g2USmv3vBYuLBjEOKra5zavJnxo_4CoMlz8LtDl8hLQ" id="imgPix2" alt="IMG-PRODUCT">

        <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
          Quick View
        </a>
      </div>

      <div class="block2-txt flex-w flex-t p-t-14">
        <div class="block2-txt-child1 flex-col-l ">
          <a href="/Home/ProductDetail/2" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
            LACE WIG
          </a>

          <input id="Image1" name="Image1" type="hidden" value="5d7e96c5-2c01-4f3f-9cfa-09f327aab817_model-model-remy-dream-weaver-dream-weaver-yaky-10.jpg">
          <input id="Image2" name="Image2" type="hidden" value="">
          <input id="Image3" name="Image3" type="hidden" value="">
          <input id="Description" name="Description" type="hidden" value="HAIR DOM">
          <input id="Price" name="Price" type="hidden" value="16000.00">
          <input id="Size" name="Size" type="hidden" value="15">
          <input id="ProdName" name="ProdName" type="hidden" value="LACE WIG">
          <span class="stext-105 cl3">
            N 16000.00
          </span>
        </div>

        <div class="block2-txt-child2 flex-r p-t-3">
          <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
            <img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
            <img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item women" style="position: absolute; left: 0%; top: 445px;">
    <!-- Block2 -->
    <div class="block2">
      <div class="block2-pic hov-img0">
        <img src="/images/ed347c52-e1ab-4059-9207-742c04f6d242_KZ6OR.jpg?v=lLlRsUR3vXeV76vghx52VY8HicpXGNKpVTSFurOtleM" id="imgPix2" alt="IMG-PRODUCT">

        <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
          Quick View
        </a>
      </div>

      <div class="block2-txt flex-w flex-t p-t-14">
        <div class="block2-txt-child1 flex-col-l ">
          <a href="/Home/ProductDetail/3" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
            LACE WIG
          </a>

          <input id="Image1" name="Image1" type="hidden" value="ed347c52-e1ab-4059-9207-742c04f6d242_KZ6OR.jpg">
          <input id="Image2" name="Image2" type="hidden" value="">
          <input id="Image3" name="Image3" type="hidden" value="">
          <input id="Description" name="Description" type="hidden" value="HAIR DOM">
          <input id="Price" name="Price" type="hidden" value="22500.00">
          <input id="Size" name="Size" type="hidden" value="15">
          <input id="ProdName" name="ProdName" type="hidden" value="LACE WIG">
          <span class="stext-105 cl3">
            N 22500.00
          </span>
        </div>

        <div class="block2-txt-child2 flex-r p-t-3">
          <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
            <img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
            <img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
          </a>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item women" style="position: absolute; left: 50%; top: 445px;">
    <!-- Block2 -->
    <div class="block2">
      <div class="block2-pic hov-img0">
        <img src="/images/e72f6dd5-a2f1-448f-abf6-a3ed08547bb7_ed6.jpg?v=wnPvcpEnY7CmfOZbwzVKf2sfZqeGOUdx0znVbL9RHsU" id="imgPix2" alt="IMG-PRODUCT">

        <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
          Quick View
        </a>
      </div>

      <div class="block2-txt flex-w flex-t p-t-14">
        <div class="block2-txt-child1 flex-col-l ">
          <a href="/Home/ProductDetail/4" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
            RED ROSES
          </a>

          <input id="Image1" name="Image1" type="hidden" value="e72f6dd5-a2f1-448f-abf6-a3ed08547bb7_ed6.jpg">
          <input id="Image2" name="Image2" type="hidden" value="">
          <input id="Image3" name="Image3" type="hidden" value="">
          <input id="Description" name="Description" type="hidden" value="HAIR DOM">
          <input id="Price" name="Price" type="hidden" value="17000.00">
          <input id="Size" name="Size" type="hidden" value="15">
          <input id="ProdName" name="ProdName" type="hidden" value="RED ROSES">
          <span class="stext-105 cl3">
            N 17000.00
          </span>
        </div>

        <div class="block2-txt-child2 flex-r p-t-3">
          <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
            <img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
            <img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
          </a>
        </div>
      </div>
    </div>
  </div>


</div>