Question

以下列方式处理模态：

$(document).on('click', "[href=\"#edit-my-modal\"]", function() { 
      ...
 }

现在我需要能够使用添加到当前id结尾的动态id做同样的事情，例如：

$(document).on('click', "[href=\"#edit-my-modal_1\"]", function() { 
          ...
     }

因此，我尝试使用jQuery“starts with”来触发此click-event，以便在id以#edit-my-modal_开头时触发相同的事件。

如果是id而不是href触发我可以使用的函数：

[id^='edit-my-modal_']

但是如何在我的代码中使用href来完成？帮助赞赏。谢谢！

Answer 1

使用此选择器[id*=\"edit-my-modal_\"]，您可以找到包含edit-my-modal_ +等的所有元素。

$(document).on('click', '[id*=\"edit-my-modal_\"]', function() { 
      console.log(this.id);
});

$(document).on('click', '[href*=\"edit-my-modal_\"]', function() { 
      console.log(this.href);
});

a {
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>With id</h2>
<a id="edit-my-modal_1">Click</a>
<a id="edit-my-modal_2">Click</a>
<a id="edit-my-modal_3">Click</a>
<a id="edit-my-modal_4">Click</a>
<a id="edit-my-modal_5">Click</a>
<h2>With href</h2>
<a href="#edit-my-modal_5">Click</a>
<a href="#edit-my-modal_4">Click</a>
<a href="#edit-my-modal_3">Click</a>
<a href="#edit-my-modal_2">Click</a>
<a href="#edit-my-modal_1">Click</a>

Answer 2

你可以通过课堂实现这一目标。

 <!DOCTYPE html>
 <html>
 <head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">  </script>
</head>
<body>
<a id="edit-my-modal_1" class="modal">Click</a>
<a id="edit-my-modal_2" class="modal">Click</a>
<a id="edit-my-modal_3" class="modal">Click</a>
<a id="edit-my-modal_4" class="modal">Click</a>
<a id="edit-my-modal_5" class="modal">Click</a>
<script>
$(document).ready(function () {
  $(document).on('click', '.modal', function () {
    console.log($(this).attr('id'));
  })
})
</script>
</body>

＆＃13;

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>

    <a id="edit-my-modal_1" class="modal">Click</a>
    <a id="edit-my-modal_2" class="modal">Click</a>
    <a id="edit-my-modal_3" class="modal">Click</a>
    <a id="edit-my-modal_4" class="modal">Click</a>
    <a id="edit-my-modal_5" class="modal">Click</a>
    <script>
    $(document).ready(function () {
      
      $(document).on('click', '.modal', function () {
        alert($(this).attr('id'));
      })
    })
    
  </script>
  </body>
  
</html>

＆＃13;

以“href-tag而不是id

2 个答案: