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

将$（this）。info附加到Modal

1 个答案: