Question

我有这个HTML代码：

<a class="infoBox" href="#mnModal">Open modal</a>

<div class="modal" data-modal="mnModal">
  <button>X</button>
  <p>Hello</p>
</div>

所以当open标记与href标记匹配时，我想将类data-modal添加到模式中。

我设置了这段代码：

首先，我将href值写入变量并替换#。然后我想找到匹配的data-attribute并将类open添加到其中

$('.infoBox').click(function(){
  var addressValue = $(this).attr("href").replace('#', '') ;
  $('.modal').find("[data-modal='${addressValue}']").addClass('open');
});

位不起作用:-( https://codepen.io/Sepp/pen/BxqNZr

为什么不呢？是语法错误还是概念性的？ html标记会重复几次，因此必须基于类似href标记的内容。我不能只使用一个类作为选择器。

Answer 1

我认为你做错了。您最好使用jQuery的data()方法来检索data-modal属性。

$('.infoBox').click(function(){
    var addressValue = $(this).attr("href").replace('#', '') ;
    if($('.modal').data('modal') == addressValue){
      $('.modal').addClass('open');
    }
  });

或者，如果有多个具有相同类名“模态”的模态，您最好使用：

$('.infoBox').click(function(){
    var addressValue = $(this).attr("href").replace('#', '') ;
    $('.modal').each(function(){
       if($(this).data('modal') == addressValue){
          $(this).addClass('open');
       }
    });
  });

Answer 2

find（）方法返回所选元素的后代元素。

后代是孩子，孙子，曾孙等等。

它不包含元素本身。

link：https://www.w3schools.com/jquery/traversing_find.asp

改为使用

$(".modal[data-modal='"+addressValue+"']").addClass('open');

根据data-atribute和href添加类

2 个答案: