Функция множественного нажатия на Javascript

Question

Я новичок в JavaScript, и я использую этот скрипт:

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

для функции при нажатии, когда я нажимаю применить ее, чтобы отобразить информацию о применении Div. эта функция работает, однако, если я создаю несколько идентификаторов применения, она не работает. Пожалуйста помоги мне с этим.

Answer 1

id должен быть уникальным, поэтому используйте общий класс для всех этих элементов

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

Answer 2

Если вы хотите связать функцию щелчка для нескольких элементов DOM, вы можете использовать ее как,

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

с , разделитель. Однако вы не можете назвать одинаковые идентификаторы для различных элементов HTML. В этом случае выберите селектор класса, как предложено в комментариях @Pranav

Например,

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

Answer 3

Попробуйте это решение:

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

Answer 4

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

DEMO

$(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");
  });
});

DEMO

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