如何將數據從鏈接傳遞到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附加處理程序，我將基於元素的ID或一些自定義屬性（而不是類）進行選擇。 假設您有許多這樣的鏈接：

<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元素的聲明：

<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

如果您的鏈接ID與數組中的索引順序相對應，則可以執行以下操作：

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

我不確定我確切了解您的要求。 如果不合適，請進行說明。