根據用戶單擊的鏈接更改提示文本

Question

我正在一個有“待辦事項”隊列的網站上工作，用戶可以對其進行編輯，聲明或標記為已完成。 當用戶單擊鏈接以執行“您確定要對此項目進行操作？”的操作之一時，我想要一個簡單的提示。 我知道我可以為每個函數編寫一個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>

Answer 1

工作示例： 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，所以會分配一個數據標簽。

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/