javascript - 将 $(this).info 附加到 Modal

Question

所以，我正在建立一个网上商店，上面有几个商品，每个商品都有一个独特的图像、名称和价格。当我按下第一个项目时，我想将该项目图像、该项目价格和该项目名称附加到我的模态中。截至目前，我所能附加的只是独特的图像，现在我在这里寻求帮助，因为我已经被困了一段时间了。这是我到目前为止得到的JS。

$(document).ready(function(){

        //STORE ITEM--------------------------------------------------------------->
        var $productItem = $(".storeItem");
        var $productPrice = $(".productPrice");
        $productItem.addClass("large-4 small-6 columns");

        //MODAL POPUP-------------------------------------------------------------->
        var $myModal = $(".reveal-modal");
        var $imageContainer = $('.imageContainer');
        var $productPriceContainer = $("#productPriceContainer");
        var $productNameContainer = $("#productNameContainer");

        $imageContainer.addClass("large-4 small-12 columns");


        //ADD THE IMAGES AND INFO TO THE PRODUCT---------------------------------->

        $(function() {

            $productItem.click(function(){

        });

        $('.storeItem a img').click(function() {
            if ($(".imageContainer:contains('img')")) {
                $imageContainer.empty();
            }

            $img=$(this).attr('src');
            $imageContainer.append("<img src="+$img+" />");
        });
    });
});

根据请求，HTML。 :

<div id="myModal" class="reveal-modal" data-reveal>
    <div class = "imageContainer"></div>
    <h2 id = "productNameContainer"></h2>
    <p id = "productPriceContainer"></p>
    <a class="close-reveal-modal">&#215;</a>
</div>


    <div class="storeItem">
        <a href="#" data-reveal-id="myModal">
            <img src="http://designspiration.net/data/l/423341110329_Qy737Vid_l.jpg">
            <div class ="panel">
                 <h5 class="productName">Kotthållare</h5>
                 <h6 class="productPrice">$99.90</h6>
            </div>
        </a>
    </div>

感谢您的帮助。非常感谢。如果您能解释一下您的答案背后的想法，以便我可以从中学习，我也将不胜感激。 :)

问候大卫

Answer 1

您可以在 h5 和 h6 中使用

获取 HTML，在本例中只是一些文本或数字

$name= $(this).parent('div a').find('.productName').html();
$price= $(this).parent('div a').find('.productPrice').html();

之后您只需将其附加到您想要的任何位置

here is an example