JQuery - как определить, какая ссылка была нажата

Question

У меня есть простой кусок PHP, который генерирует п копии следующего кода:

<p class="ShowSDB_L2" class="center" onClick="FSD_L2('<?php print dbG;?>','<?php print $sLID;?>')">Click Here to See Data</p> 
<div class="divSDB_L2"> 
</div> 

Он генерируется с использованием PHP, поэтому количество копий неизвестно спереди.

На другой странице у меня есть следующие Javascript (с помощью JQuery)

function FSD_L2(dbG,SlID) 
    { 
     $(".divSDB_L2").load("test15.php?dbG="+dbG+"&SlID="+SlID).css('display','block'); 
    } 

Когда текст выше (Нажмите здесь, чтобы просмотреть данные) щелкают, он должен добавить содержимое test15.php между двумя DIV.

#Test15.php 
<?php 
$dbG = $_GET['dbG']; 
$SlID = $_GET['SlID']; 

print $dbG . " & " . $SlID; 
?> 

Проблема у меня есть, как определить, какая из ссылок была нажата? В настоящее время, если у меня есть три копии и нажмите один, все три копии активируются.

Надеюсь, я сделал это достаточно ясно. Я уверен, что должен быть простой способ, но я совершенно новый для Javascript/jQuery.

Answer 1

Не уверен, что я полностью понимаю, с чем вы сталкиваетесь, но вот как я это сделаю.

<p class="ShowSDB_L2" class="center" data-dbg="<?php print dbG;?>" data-slid="<?php print $sLID;?>">Click Here to See Data</p> 
<div class="divSDB_L2"></div> 

$(document).ready(function() { 
    $(document).on('click', 'p.ShowSDB_L2', function(evt) { 
     var $p = $(evt.currentTarget), 
      dbG = $p.data('dbg'), 
      slid = $p.data('slid'), 
      $div = $p.next(); 

     FSD_L2(dbG, slid, $div); 
    }); 
}); 

function FSD_L2(dbG, SlID, $div) 
{ 
    $div.load("test15.php?dbG="+dbG+"&SlID="+SlID).css('display','block'); 
} 

Обработчик нажмите не зашиты для каждого p тега. Вместо этого с каждым тегом p мы сохраняем необходимый data, то есть dbg & slid.

Обработчик щелчка затем прикрепляется один раз к document ready. jQuery реферат по различным браузерам и передает его обработчикам объект event в качестве его первого параметра. Затем этот объект можно использовать для поиска элемента, на котором произошло событие.См.: http://api.jquery.com/on/

Наконец, мы извлекаем требуемые данные из элемента с щелчком, находим div, который необходимо обновить, а затем вызвать пользовательскую функцию.

Answer 2

Как сказал Брайан, вы можете просто поместить тот же класс на все свои ссылки и использовать ключевое слово $(this) в jQuery внутри функции щелчка, чтобы узнать, какая ссылка была нажата.

Вот простой пример изменения цвета ссылок на навигационной панели, используя эту технику: http://jsfiddle.net/9E7WW/

HTML:

<a class="nav">Test</a> 
<a class="nav">Test2</a> 
<a class="nav">Test3</a> 
<a class="nav">Test4</a> 

Javascript:

$(document).ready(function(){ 
    $('.nav').click(function(){ 
     // change all to black, then change the one I clicked to red 
     $('.nav').css('color', 'black'); 
     $(this).css('color', 'red'); 
    }); 
}); 

Answer 3

Вот кросс-браузерный способ найдите элемент (цель), который вызвал событие (e):

function getTarget(e){ 
// non-ie or ie? 
e=e||window.event; 
return (e.target||e.srcElement); 
}; 

Answer 4

Добавить полный URL в вашу ссылку (или p в данном случае) с использованием атрибута данных:

<p class="ShowSDB_L2" class="center" data-loadurl="test15.php?dbG=<?php echo $dbG; ?>&SlID=<?php echo $SlID; ?>">Click Here to See Data</p> 

<div class="divSDB_L2"></div> 

Затем сделать все привязки непосредственно в JQuery поэтому у вас есть прямой доступ к ссылке, которая была нажата :

$(document).ready(function() { 
    $('.ShowSDB_L2').on('click', function(e) { 
     e.preventDefault(); 
     $('.divSDB_L2').empty().load($(this).data('loadurl')).show(); 
    }); 
});