Question

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

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

当我点击时点击功能

将其应用于显示应用信息div。这个功能正在工作，但如果我创建多个应用ID它不起作用。请帮帮我。

Answer 1

试试这个解决方案：

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

Answer 2

id应该是唯一的，因此有多个#apply和#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");
  });
});

<强>样本

＆＃13;

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

＆＃13;

<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>

＆＃13;

如果.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");
  });
});

<强>样本

＆＃13;

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

＆＃13;

<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>

＆＃13;

Javascript上的多次点击功能

2 个答案: