Question

我正在一个网站上工作，该网站的队列为＆＃34;做＆＃34;用户可以编辑，声明或标记为已完成的项目。当用户点击链接执行其中一项操作时，我想要一个简单的提示，说明＆＃34;您确定要[动作]这个项目吗？＆＃34;。我知道我可以为每个人编写一个javascript函数并使用＆＃34; onclick＆＃34;，但有没有一种很好的方法可以编写一个函数来填充正在执行的操作？

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>

Answer 1

工作示例：Vanilla Javascript或jQuery

将问题所需的文本以及问题中的文本作为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，所以会改为分配数据标签。

Answer 2

如果用户拒绝，您可以使用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/

根据用户点击的链接更改提示文本

2 个答案: