Как передать данные из ссылки в функцию jQuery?

Question

$(function(){
    $('.tab2').live('click', function() {
      $('#coverTextH3').text(data[1].H3)
      $('#coverTextP').text(data[1].P)
        });
           });

Допустим, у меня есть ссылка <a href="www.link.com"></a> Как передать данные, индекс массива, в функцию jQuery, чтобы мне не приходилось повторять мой код для каждого индекса [0] - [7]?

 var data = [
    {
        H3: 'name',
            p: 'more'

    },
    {
        H3: 'string',
        p: 'more strings'
     }]

Answer 1

Есть множество вариантов.Если присоединить обработчики через javascript, я бы выбрал, основываясь на идентификаторе элемента или каком-либо пользовательском атрибуте, а не на классе.Допустим, у вас есть несколько таких ссылок:

<a href="#" class="tab1" link-number="1">Tab 1</a>
<a href="#" class="tab2" link-number="2">Tab 2</a>
<a href="#" class="tab3" link-number="3">Tab 3</a>        

в этом случае javascript будет

$(function(){
    $('a[link-number]').live('click', function() {
        var index = $(this).attr('link-number') * 1 - 1;
        $('#coverTextH3').text(data[index].H3)
        $('#coverTextP').text(data[index].P)
    });
});

В качестве альтернативы, вы можете прикрепить обработчики кликов прямо в объявлении a elements:

<a href="#" class="tab1" onclick="setCover(0)">Tab 1</a>
<a href="#" class="tab2" onclick="setCover(1)">Tab 1</a>
<a href="#" class="tab3" onclick="setCover(2)">Tab 1</a>

и определите setCover функцию следующим образом:

function setCover(index) {
    $('#coverTextH3').text(data[index].H3)
    $('#coverTextP').text(data[index].P)
}

Каждая из альтернатив требует изменений в вашем htlm.Если по какой-то причине это невозможно, вам нужно, по крайней мере, теперь выбрать диапазон вкладок, что может быть довольно сложно.

Answer 2

Что-то похожее на это должно работать:

разметка:

<a href="www.link.com" data-index="1" id="link1" />

JavaScript:

$(function(){
    $('#link1').live('click', function() {
      var idx = $(this).data('index');
      $('#coverTextH3').text(data[idx].H3)
      $('#coverTextP').text(data[idx].P)
    });
});

Answer 3

если ваши идентификаторы ссылок соответствуют порядку индекса в массиве, вы можете сделать что-то вроде этого:

пример jsfiddle

JQuery:

$(function() {
    $('.tab2').live('click', function(e) {
        e.preventDefault();

        // parse the integer from the ID 
        // and get the 0-based index (by subtracting 1)
        var idx = $(this).attr('id').replace('link', '') * 1 - 1; 

        $('#coverTextH3').text(data[idx].H3)
        $('#coverTextP').text(data[idx].p)
    });
});

HTML:

<a href="#www.link.com" id="link1" class="tab2">Link 1</a>
<a href="#www.link.com" id="link2" class="tab2">Link 2</a>

<h3 id="coverTextH3"></h3>
<p id="coverTextP"></p>

Answer 4

<a href="javascript:someFunction(1);">Text</a>

Я не уверен, что точно понимаю, о чем вы спрашиваете.Если это не подходит, пожалуйста, уточните.