0

我正在一个有“待办事项”队列的网站上工作，用户可以对其进行编辑、声明或标记为已完成。我想要一个简单的提示，当用户单击链接以执行其中一项操作时显示“您确定要 [action] this item？”。我知道我可以为每个函数编写一个 javascript 函数并使用“onclick”，但是有没有一种很好的方法来编写一个函数来填充正在完成的操作？

HTML：

<table>
  <tr>
    <td id='complete'>
        <a href='submit.php?request=$request_index'><img src='images/completeCheck.gif'/></a>
    </td>
    <td>
        <a href='claim.php?request=$request_index'><img src='images/claimStar.gif'/></a>
    </td>
  </tr>
</table>
4

2 回答 2

2

工作示例：Vanilla Javascript或jQuery

将类 areyousure 和问题中所需的文本添加到每个锚点作为rel属性。

<table>
  <tr>
    <td id='complete'>
        <a class='areyousure' href='submit.php?request=$request_index' rel='complete check'><img src='images/completeCheck.gif'/></a>
    </td>
    <td>
        <a class='areyousure' href='claim.php?request=$request_index' rel='claim star'><img src='images/claimStar.gif'/></a>
    </td>
  </tr>
</table>

然后使用这个 javascript 来构造问题，如果用户按下取消，它将返回 false，从而阻止该操作。

var areyousures = document.getElementsByClassName('areyousure');
for (i in areyousures) {
    var item = areyousures[i];  
    item.onclick=function(){
       var q='Are you sure you want to ' + this.rel + ' this item?';
       if (!confirm(q)) return false; 
    }
}

如果你使用 jQuery

$('.areyousure').on('click', function(){
    var q='Are you sure you want to ' + this.rel + ' this item?';
    if (!confirm(q)) return false;
})

为什么rel？因为它是有效的 HTML 并且您还没有使用它。通常我总是使用 jQuery，所以会分配一个数据标签。

于 2013-10-21T00:55:12.190 回答
1

如果用户说不，您可以使用 jQuery 验证停止链接处理，例如：

$('a').click(function(evt) {
   var res = confirm('Are you sure you want to ' + $(this).text());
    if (!res) {
       evt.preventDefault();
    }
});

我发布了一个小提琴http://jsfiddle.net/dtymH/1/

于 2013-10-21T00:40:59.233 回答