Question

我正在构建一个允许用户从服务器上的文件夹下载文件的站点。

文件从Where-Object中提取并存储在database中。每行都有一个下载按钮。我知道我不能放HTML table。

单击按钮时处理JavaScript函数的最佳方法是什么。

我应该设置id='download'

之类的内容

然后只将download-214124作为选择器放在("download-*")？

中

Answer 1

正如您所说，您不能对所有元素使用公共ID，因为ID必须是唯一的。

相反，您可以对所有元素使用公共类，然后使用data-*属性来存储id，如

<button class="download" data-id="1235">Download</button>

然后

$('.download').click(function(){
    var id = $(this).data('id');
    //do download code for id here
})

注意：如果您正在处理动态元素，那么您将必须使用事件委派来注册处理程序，如

$(document).on('click', '.download', function() {
  var id = $(this).data('id');
  //do download code for id here
})

Event binding on dynamically created elements?

Answer 2

HTML5提供data-attribute，允许您存储与DOM元素相对应的数据。这使得生活变得非常容易与JavaScript联系起来。 jQuery具有data()功能，可以访问该元素的data-attribute。

您可以执行以下操作。

<强> HTML

<table>
    <tr><td>
        <p>file with id 1</p>
        <button data-id="1">download</button>
     </td></tr>
    <tr><td>
        <p>file with id 2</p>
        <button data-id="2">download</button>
    </td></tr>
    <tr><td>
        <p>file with id 3</p>
        <button data-id="2">download</button>
     </td></tr>
</table>

<强>的Javascript

$('button').on('click', function(e){
    e.preventDefault();

    var id = $(this).data('id');

    alert('Do ajax request to download file with id ' + id);
});

这是jsfiddle。

Answer 3

如果使用JavaScript构建HTML表，则可以在运行时附加事件处理程序，而无需任何ID。

一个很好的例子就是当你通过JavaScript循环遍历一系列结果来构建HTML结构时。在这种情况下，您可以使用闭包来维护对与特定HTML元素对应的结果数据的引用，并在调用事件处理程序时使用该数据。

在下面的示例中，附加到每个按钮的事件处理程序能够直接调用数组中相应对象的select q.empid, q.fullname, q.scheddate, q.datefrom, q.dateto, CASE WHEN q.timein = q.datefrom THEN 1 ELSE 0 END AS days, CASE WHEN q.timein is null THEN 1 ELSE 0 END AS absent, CASE WHEN q.timein > q.datefrom THEN 1 ELSE 0 END AS late from ( select e.empid, e.fullname, s.scheddate, s.datefrom, s.dateto, (select datetime from logs l where l.logs_id = e.logs_id and l.type = 0 and Date(l.datetime) = Date(s.datefrom) and s.scheddate is not null) as timein, (select datetime from logs l where l.logs_id = e.logs_id and l.type = 1 and Date(l.datetime) = Date(s.dateto) and s.scheddate is not null) as timeout from employees e left join scheddate s on s.empid = e.empid where s.scheddate is not null ) q属性;我们不需要向按钮元素添加任何内容（既不是ID也不是数据属性）来维护该引用。

＆＃13;

value

＆＃13;

var dataResults = [{title:"One",value:1}, {title:"Two",value:2}, {title:"Three",value:3}, {title:"Four",value:4}];
var output = document.getElementById("output");
for (var i = 0, len = dataResults.length; i < len; i++) { // 1. Loop through results
  var btn = document.createElement("button"); // 2. Create your HTML element(s)
  btn.value = dataResults[i].title; // 3. Set HTML based on result values
  btn.innerHTML = dataResults[i].title;
  (function(result) { // 4. Use a closure to capture the current result item
    btn.addEventListener("click",function() {
        alert("You clicked button " + result.value);
      }); // 5. Add an event handler that references the result item.
  })(dataResults[i]); // (Pass the current result item into the function expression as a parameter)
  output.appendChild(btn); // 6. Add your HTML to the page.
}

＆＃13;

当然，如果JavaScript不负责在您的应用程序中构建HTML，那么这些都不相关！

处理具有相同ID的元素的点击次数的最佳方法

3 个答案: