如何将数据从链接传递到 jQuery 函数

How do I pass data from a link to a jQuery function?

本文关键字：jQuery 函数 链接 数据      更新时间：2023-09-26
$(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'
     }]

有很多选择。如果通过 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。如果由于某种原因无法实现，您现在至少需要选项卡的范围，这可能非常棘手。

与此类似的东西应该有效：

标记：

<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)
    });
});

如果你的链接ID对应于数组中的索引顺序，你可以这样做：

示例 JSFIDDLE

j查询：

$(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>

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

不确定我是否完全理解你在问什么。如果这不合适，请澄清。

相关文章：