Javascript 使用jQuery获取类的索引时遇到问题

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

我正在尝试使用class

close

测试是否获得正确的关闭按钮，但我的

控制台.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>

我正在尝试遍历这个click函数，并将具有正确索引的每个类分配给一个变量，我正在使用

console.log

将索引打印到控制台

使用

console.log（closeindex）

，我试图获取close按钮的索引，该按钮具有匹配的索引span

。打开单击的

，但当前它返回

-1

我想最终做一些事情，比如：

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

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

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

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

---

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

如果您试图根据按钮打开和关闭模式对话框，我建议使用另一种索引方法。有了索引，对元素的任何重构/重新排序都可能使代码完全失效

考虑使用

data

属性跟踪每个

open

按钮所指的模式。这样，无论按钮/模态位于何处，它们都会永久链接

如果给每个模式一个ID，然后将该ID添加到打开按钮上的

data

属性中

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

div.modal{
显示：无；
填充：50px；
边框：1px纯红；
}

按钮A
按钮B
我是模态1！
&时代；
我是模态2！
&时代；

如果您试图根据按钮打开和关闭模式对话框，我想建议一种替代索引的方法。有了索引，对元素的任何重构/重新排序都可能使代码完全失效

考虑使用

data

属性跟踪每个

open

按钮所指的模式。这样，无论按钮/模态位于何处，它们都会永久链接

如果给每个模式一个ID，然后将该ID添加到打开按钮上的

data

属性中

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

div.modal{
显示：无；
填充：50px；
边框：1px纯红；
}

按钮A
按钮B
我是模态1！
&时代；
我是模态2！
&时代；

FYI:

.style.display=“无”=
.hide（）索引器将是一个数字，而不是一个元素。所以它不会发现作为一个开放元素，因此没有找到-1。@Taplar是的，我可以看出这是不必要的，但是为了直观地看到我引用的是正确的
.close
，我想
控制台.log
它的索引。我个人并不信任我的javascript技能，与其依赖索引，不如强烈建议使用
数据
属性来控制每个
打开
按钮所指的模式。等等，lol，我想我完全忽略了这样一个事实，即代码在某个地方开始使用“.close”，~~必须更新答案。仅供参考：
.style.display=“无”=
.hide（）索引器将是一个数字，而不是一个元素。所以它不会发现作为一个开放元素，因此没有找到-1。@Taplar是的，我可以看出这是不必要的，但是为了直观地看到我引用的是正确的
.close
，我想
控制台.log
它的索引。我个人并不信任我的javascript技能，与其依赖索引，不如强烈建议使用
数据
属性来控制每个
打开
按钮所指的模式。等等，lol，我想我完全忽略了这样一个事实，即代码在某个地方开始使用“.close”，~~~我得更新答案。我花了这么多时间试图找出答案，而这个答案有多简单，这让我发疯。感谢
data
是自定义属性的正确前缀。例如，您可以执行
和
$（“span”）。数据（“任何内容”）
将输出
“hello world”
var modalId=$（this）。数据（“modal”）是否应该在“模式”中有点？否。
data（）
中的字符串仅指数据属性的名称。如果它是
datacoffeebot
，那么您可以通过执行
$（this.data（“coffeebot”）我花了多少时间试图找出这个答案，而这个答案有多简单，这让我发疯。感谢
data
是自定义属性的正确前缀。例如，您可以执行
和
$（“span”）。数据（“任何内容”）
将输出
“hello world”
var modalId=$（this）。数据（“modal”）是否应该在“模式”中有点？否。
data（）
中的字符串仅指数据属性的名称。如果它是
datacoffeebot
，那么您可以通过执行
$（this.data（“coffeebot”）
<span class="open" data-modal="modal1">Open Modal 1</span>
<div class="modal" id="modal1"></div>