javascript - 如何将数据从链接传递到 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)
}

每个备选方案都需要更改您的 html。如果由于某种原因不可能，您至少现在需要调整标签的范围，这可能非常棘手。