Каковы мои варианты получения всех необходимых данных с использованием javascript и / или jQuery для следующего сценария?

Question

Я не уверен, как это лучше всего сформулировать, поэтому я попробую и, надеюсь, пересмотрю его, как только он придет ко мне.

Используя javascript / jQuery, допустим, я хочу получить некоторые данные из элемента, по которому щелкнули, в функцию для обработки. Пара вариантов:

ВАРИАНТ 1:

$('.classOfInterest').click(function() {
      // How can I get 'a' and 'b'?
    var c = $(this).hasClass('cExists'); 
}); 
<a class="cExists classOfInterest" />

ВАРИАНТ 2:

function processClick(string a, string b) {
    // How can I get a reference to the calling element, similar to $(this) in the event handler?
    var c;  // here I want to determine whether the calling element has class 'cExists'    
}
<a class="cExists" href="javascript:processClick('a', 'b')" />

Answer 1

Вариант 1 - это более удобный для jQuery способ выполнить то, что вы пытаетесь сделать. Вы можете получить a и b, сделав их атрибутами ссылки:

 $('.classOfInterest').click(function() {
       // How can I get 'a' and 'b'?
     var c = $(this).hasClass('cExists'); 
     alert(this.attr('a') + ' ' + this. attr('b'));
 }); 
 <a class="cExists classOfInterest" a="hi" b="mom" />

Answer 2

JS:

function processClick(id, a, b) {
  $(id).click(function() {
    var c = $(this).hasClass('cExists'); 
    alert(a + ' ' + b);
  }); 
}

HTML:

<script type="text/javascript">processClick("foo123", "a", "b")</script>
<a class="cExists" id="foo123" href="#">

Другой вариант, если вы хотите избежать встроенного js внутри html, это сделать что-то вроде следующего.
JS:

$(function() {
  $('cExists').click(function() {
    var c = $(this).hasClass('cExists');
    var a = $(this).attr('title').split(":")[0];
    var b = $(this).attr('title').split(":")[1];
    alert(a + ' ' + b);
  }); 
}); 

HTML:

<a class="cExists" href="#" title="foo:bar">

Но таким образом вы будете выставлять переменные a и b в заголовке элемента.

Answer 3

Если вы ищете совместимое со стандартами решение, вы можете рассмотреть возможность использования данных URI , например,

<a href="data:text/csv,a-data,b-data">foo</a>

Чтобы получить данные, прочитайте атрибут href и используйте split() для извлечения значений через запятую. Не забудьте запретить действие по умолчанию с помощью preventDefault() или return false при обработке события щелчка - в противном случае браузеры попытаются загрузить данные или просто не получатся.