javascript - Javascript上的多次点击功能

Question

我是 javascript 新手，我正在使用这个脚本：

<script type="text/javascript">
$(document).ready
(function()
 {
     $('#apply').click(function()
     {
         $('#applyinfo').toggle("slow");
     });
 });
</script>

对于单击功能，当我单击应用以显示应用信息 div 时。此功能有效，但是如果我创建多个应用 ID，则它不起作用。请帮助我。

Answer 1

如果你想为多个 dom 元素绑定 click 函数，你可以使用它，

 $(document).ready(function() {
    $('#apply,#apply1,#apply2').click(function() {
      $('#applyinfo').toggle("slow");
    });
  });

带,分隔符。但是，您不能为各种 html 元素命名相同的 id。在这种情况下，请使用@Pranav 在评论中建议的类选择器

例如，

  $('.applyClass').click(function() { .. } );

Answer 2

id应该是唯一的，所以对所有这些项目使用公共类

<script type="text/javascript">
  $(document).ready(function() {
    $('.apply').click(function() {
    //-^-- class selector
      $('#applyinfo').toggle("slow");
    });
  });
</script>

Answer 3

试试这个解决方案：

$(document).ready(function() {
    $("[id$='apply']").click(function() {
      $('#applyinfo').toggle("slow");
    });
  });

Answer 4

Anid应该是唯一的，因此拥有多个#applyand#applyinfo不是一种选择。相反，切换到类。

该功能取决于您的 HTML。

如果.applyinfo是.apply这个作品的孩子：

HTML：

<div class="apply">Click here
  <div class="applyinfo">Toggle this info</div>
</div>

jQuery：

$(function() {
  $('.apply').click(function() {
    $(this).find('.applyinfo').toggle("slow");
  });
});

演示

$(function() {
  $('.apply').click(function() {
    $(this).find('.applyinfo').toggle("slow");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="apply">Click here
  <div class="applyinfo">Toggle this info</div>
</div>

<div class="apply">Click here
  <div class="applyinfo">Toggle this info</div>
</div>

<div class="apply">Click here
  <div class="applyinfo">Toggle this info</div>
</div>

如果.applyinfo不是.apply我们需要找到匹配的div的孩子。然后函数变为：

HTML：

<a class="apply-1">Click</a>
<a class="apply-2">Click</a>
<a class="apply-3">Click</a>

<div class="applyinfo-1">Belongs to a.apply-1</div>
<div class="applyinfo-2">Belongs to a.apply-2</div>
<div class="applyinfo-3">Belongs to a.apply-3</div>

jQuery：

$(function() {
  $('[class^=apply-]').click(function() {
    var nr = $(this).attr('class').split("-").pop() ,
        selector = '.applyinfo-'+nr;
    $(selector).toggle("slow");
  });
});

演示

$(function() {
  $('[class^=apply-]').click(function() {
    var nr = $(this).attr('class').split("-").pop() ,
        selector = '.applyinfo-'+nr;
    $(selector).toggle("slow");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="apply-1">Click</a>
<a class="apply-2">Click</a>
<a class="apply-3">Click</a>

<div class="applyinfo-1">Belongs to a.apply-1</div>
<div class="applyinfo-2">Belongs to a.apply-2</div>
<div class="applyinfo-3">Belongs to a.apply-3</div>