Question

我在页面上有一些隐藏的模态，我想用一个javascript代码块控制它。

我正在尝试测试我是否正在使用课程close获得正确的关闭按钮，但我的console.log当前正在打印-1。

HTML

<span class="open">Button A</span>
<span class="open">Button B</span>

<!--modal-->
<div class="modal">

    <!--modal content-->
    <div class="modal-content">
        <!--close button-->
        <span class="close">&times;</span>

        <!--content A-->

   </div>
</div>

<!--modal-->
<div class="modal">

    <!--modal content-->
    <div class="modal-content">
        <!--close button-->
        <span class="close">&times;</span>

        <!--content B-->

    </div>
</div>

JS

$(document).ready( function() {

    //when a class '.open' is clicked
    $('.open').click(function(){

        //store the index of the clicked span in a variable
        var indexer = $('.open').index(this);

        //test output - working
        console.log("open. " + indexer);

        //store all classes '.close' in a variable
        var close = $('.close');

        //store '.close' with same index as clicked button
        var closeindex = $('.close').index(indexer);

        console.log(closeindex);

    });

});

我正在尝试遍历此click函数并为每个类分配一个正确的索引到变量，我正在使用console.log将索引打印到控制台。

使用console.log(closeindex)，我正在尝试获取已点击的匹配索引为span .open的关闭按钮的索引，但目前它正在返回-1。

我想最终做类似的事情：

close.click = function() {
    $('.modal').index(indexer).style.display = "none";
}

Answer 1

var closeindex = $('.close').eq(indexer);

好的，所以如果你打开和关闭之间有一个关系，那么第三次打开与第三次关闭相关，那么你可以通过使用上面的eq（）方法得到相关的关闭。

eq（）将获取该索引处的元素，将其保留为jQuery对象。

Answer 2

如果你试图根据按钮打开和关闭模态对话框，我想建议一种替代索引方法。使用索引，对元素进行任何重构/重新排序都可能会完全丢弃代码。

考虑使用data属性来跟踪每个open按钮所指的模态。这样，无论你的按钮/模态在哪里，它们都是永久链接的。

如果您为每个模态提供一个ID，然后将该ID添加到打开按钮的data属性中...

<span class="open" data-modal="modal1">Open Modal 1</span>
<div class="modal" id="modal1"></div>

...然后您可以轻松地将打开按钮与其正确的模态相关联。

单击时，close按钮可以简单地说“关闭我的父模式”。我们可以使用.closest( selector )在DOM中遍历向上来查找第一个匹配的祖先。

工作示例：

$(".open").on("click", function() {
  $(".modal").hide();                  //Hide all open modals
  var modalId = $(this).data("modal"); //Get the Modal ID from the data-modal attribute
  var $modal = $("#" + modalId);       //Select the modal with that ID
  $modal.show();                       //Show it
});

$(".close").on("click", function() {
  $(this).closest(".modal").hide();    //Close the closest modal (ancestry-wise)
});

div.modal {
  display: none;
  padding: 50px;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="open" data-modal="modal1">Button A</span>
<span class="open" data-modal="modal2">Button B</span>

<!--modal-->
<div class="modal" id="modal1">

  <!--modal content-->
  <div class="modal-content">
    I'm modal 1!
    <!--close button-->
    <span class="close">&times;</span>

    <!--content A-->

  </div>
</div>

<!--modal-->
<div class="modal" id="modal2">

  <!--modal content-->
  <div class="modal-content">

    I'm modal 2!

    <!--close button-->
    <span class="close">&times;</span>

    <!--content B-->

  </div>
</div>


<!-- -->

无法使用jQuery

2 个答案: