Question

IziModal很漂亮，但Jquery选择器无法查看或找到它隐藏的模态元素。所以这段代码：var nextmodal = $（this）.next（＆＃39; .izra＆＃39;）; $（nextmodal）.iziModal（＆＃39;开放＆＃39;）; ，可以看到display：none隐藏的任何div，可以找到由Izimodal隐藏的任何元素EXCEPT div。

https://jsfiddle.net/zmbth7u9/4/（下面的堆叠代码段） Izimodal可以找到自己的隐藏div与类.izra但没有Jquery选择器可以吗？

我已尝试过包括div在内的所有内容：$（this）.next（$（＆＃34;：hidden：first＆＃34;））; 的console.log（$（hiddenstuff））

上面的代码跳过了Izimodal隐藏的div并找到了第二个！我需要在脚本，节省代码，标记和时间的整个文档中重复使用泛型类的模态。

我知道如何让Jquery选择器找到.izra类的div以便我可以对它采取行动吗？

由于我们无法找到兄弟姐妹，因为IziModal将它们隐藏得无法触及，也许模态div应该在没有.izra类（设置为display：none by css）的情况下开始，并在点击触发器时动态添加.izra模态类？我们可以先用next（）找到div，然后添加izra类，还是将它们放回到第一个？谢谢！

https://jsfiddle.net/zmbth7u9/4/这个模型中的模态和发现div工作，并显示莫名其妙地无法工作的界限。

＆＃13;

//How things should Work generically
$('.generictrigger').click(function () {
    var nextmodal = $(this).next('.genericmodal');
    $(nextmodal).modal('show');
});

//IziModal Initialize and fire on open
$(function () {
    $(".izra").iziModal();
    $('.izra').iziModal('open'); // This works!
});

//Proof hidden divs easily found when NOT hidden by IziModal
$(".trigger2").click(function () {
    var hiddenstuff = $(this).next($(":hidden:first")); // This works!
    console.log($(hiddenstuff))
});

//Proof IziModal divs cannot be found by Jquery selectors
$(document).on('click', '.trigger', function (event) {
    event.preventDefault();
    //  $('.izra').iziModal('open'); // THIS WORKS!
    var nextmodal = $(this).next('.izra'); // Should work but does not
    console.log($(nextmodal));
    $(nextmodal).modal('open'); // Should work but does not <<<<<<
});

＆＃13;

 .hidden { display: none; }
                .c1 { background-color:#33ccff; }
                .c2 { background-color:#ffff99; }
                .c3 { background-color:#80ff80; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
   
<link href="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/css/iziModal.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/izimodal/1.5.1/js/iziModal.js"></script>


<!--  Finding divs hidden by IziModal Begin   -->
<!-- How things should generically work calling Next() -->
            <div class="containerdivforchildren">
                <div class="c1 generictrigger">Click for Generic Modal FOUND by NEXT Selector </div>
                <div class="genericmodal modal fade modal-body modal-content"><a title="Close"><i data-dismiss="modal" class="glyphicon glyphicon-remove icon-arrow-right pull-left"></i></a>Generic Bootstrap Modal</div>
            </div>
            
            <!--        This section proves any div can be found EXCEPT divs touched by IziModal -->

            <div class="modaltriggercontainer">
                <div class="trigger2 c3">Click to Log var hiddenstuff = $(this).next($(":hidden:first"));to console</div>
                <div class="trigger c2">Click to Open Izra (will fail but logs results of $(this).next() to console</div>
                <div class="izra">Unretrievable modal div when hidden by IziModal class</div>
                <!--Above DIV IS SKIPPED AND CANNOT BE FOUND!-->
                <div id="incognito" class="c1 oddlynamed hidden">hidden by style but found using $(this).next()</div>
            </div>
            <!--  Above div is the first div found by any selector looking for the .next()-->

＆＃13;

Jquery找不到IziModal隐藏的选择器

0 个答案: