Question

我需要从一次点击事件中传递数据。我正在构建一个菜单，用于在用户连续点击的链接上提取数据。第一个链接是这样的：

?type=1

然后我需要将其链接到以下链接：

?level=2

以便数据查询为：

?type=1&level=2

问题是代码需要动态确定第二次点击的查询，这可能是也可能不是上面的最后一个查询。在用户点击之前不会确定查询，这需要在第二次点击时返回如上所述的查询字符串。

所以我有两个点击处理程序：

btn1.on('click', function() {
  // get value of "type" from query string through some regex.  This works.
}

btn2.on('click', function() {
   // get value of "level" via regex.  This works.
   // get value of type from btn1.click and add to query
   // submit query ?type=___&level=____
}

我该怎么做？我尝试使用.bind但无法正常使用。

Answer 1

您无法直接在点击事件之间传递数据，至少在没有很多尴尬的情况下也是如此。

我建议将数据放在点击事件可以访问它的某个地方，以及某个有意义的地方。对于您的情况，这可能意味着某些父元素上的数据属性。例如，如果你有两组按钮和一个“查询”提交类型按钮，它可能看起来像这样：

<ul id="type_menu">
  <li><a href="...">Type 1</a></li>
  <li><a href="...">Type 2</a></li>
  <li><a href="...">Type 3</a></li>
</ul>
<ul id="level_menu">
  <li><a href="...">Level 1</a></li>
  <li><a href="...">Level 2</a></li>
  <li><a href="...">Level 3</a></li>
</ul>
<button id="go">Go!</button>

使用以下脚本：

$(function() {
    $('#type_menu').on('click','li a', function() {
        type = parse_type_from_href($(this));
        $('#type_menu').data('selected_type',type);
    }

    $('#level_menu').on('click','li a', function() {
        level = parse_level_from_href($(this));
        $('#level_menu').data('selected_level',level);
    }

    $('#go').click(function() {
        query='?type=' + $('#type_menu').data('selected_type') + '&level=' + $('#level_menu').data('selected_level');
        //Do what you will with the query here...
    })
}

显然你必须根据自己的用途进行调整，如果你有很多按钮，这个代码可以更好地抽象出来，但是根据你所说的，我认为数据属性很好。这是你最好的选择。

在两个jQuery单击事件之间传递数据

1 个答案: