Question

我很难用一些我认为非常简单的事情。我希望你们大家可以帮助我。

我正在使用名为zoomtoo的jquery插件。

我需要在其父div（zoomToo()）内的子div（modal-img-wrap）上应用插件函数（modal）。

JS脚本：

<script type="text/javascript">
    $(function() {
        $(".modal").zoomToo({
            magnify: 1
        });
    });
</script>

HTML代码：

<body>

    <div id="ex2" class="modal">
        <div class="modal-img-wrap">
            <img class="modal-img" src="homedrive.jpg" />
        </div>
    </div>

</body>

Answer 1

我很困惑，您可以按名称$（“＃MyDiv”）选择div。设置div的名称属性。

$（function（）{

        $("#MyDiv").zoomToo({
            magnify: 1
        });
    });
  </script>

Answer 2

这是一个工作示例。注意div中的属性。并绑定jquery.zoomtoo.min.js脚本，因为它已缩小，例如小。如果你已经在包含div（modal-img-wrap）的图像上有一个css类，那么你也可以直接在js中引用它。因此，您可以在js脚本中编写.modal .modal-img-wrap而不是.modal-img-wrap。

祝你好运。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
        <meta charset="UTF-8" />
        <!-- The above 3 meta tags must come first in the head -->

        <title>Demo</title>

        <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

        <script src="dist/jquery.zoomtoo.min.js"></script>

        <script type="text/javascript">
            $(function () {
                $(".modal-img-wrap").zoomToo({
                    magnify: 1
                });
            });
        </script>
    </head>
    <body>

        <div id="ex2" class="modal"><!-- Not this div -->
            <div class="modal-img-wrap" data-src="homedrive_big.jpg"><!-- I need this div selected by the plugin. -->
                <img class="modal-img" src="homedrive_normal.jpg" />
            </div>
        </div>

    </body>
</html>

需要帮助用jquery选择子div

2 个答案: