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

我正在一个网站上有一个“待办事项”的队列，用户可以编辑，声明或标记为已完成。我想要一个简单的提示，当用户点击链接执行那些“你确定要[操作]这个项目？”的操作时。我知道我可以为每个编写一个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>

来源

2013-10-21 jackel414

是的。请添加相关的HTML – Popnoodles

。对不起，不确定是否需要。 – jackel414

工作示例：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-21 00:55:12 Popnoodles

这是完美的，谢谢。香草JavaScript解决方案效果很好。 – jackel414

您可以使用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-21 00:40:59

OP没有说他们想要这个答案作为jQuery，并且没有jQuery标签。 – Popnoodles

当然，jQuery归结为简单的js，但我不会尝试重新创建它的功能。你可以编写一个循环遍历所有链接并添加一个点击处理函数的函数，但jQuery已经为你做了。 –

我一开始没有HTML，但现在你可以看到我正在使用图像而不是文本来提供链接。此功能是否可以与图像一起工作（可能使用替代文字），还是必须是文字？ – jackel414

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

回答

相关问题