Question

我有两个a个不同onclick值的链接。它们共享相同的class。

onclick值是这些

BUTTON 1

onclick="return confirm('Click OK to cancel this booking.\n\nCancellation fees may be payable.\nSee the Terms and Conditions.');"

BUTTON 2

onclick="return confirm('Do you want to cancel this service?\nClick \'OK\' to continue. Click \'Cancel\' if you do not wish to proceed.');"

我想做的事情。

当有人点击锚链接时，理想情况下我想找到return值，并根据该值将确认弹出消息更改为其他内容。因此，对于第一个按钮，新消息为message 1，按钮2新消息为message 2。

问题是，我无法将html编辑为第三方程序。我只能用jquery来操作它。我尝试了这个，但我很遗憾如何识别点击哪个锚链接

var cancelBookingClick = $('a.replaced_btn')[0].onclick;
var newCancelBookingClick = cancelBookingClick.toString();

if (newCancelBookingClick.indexOf('Click OK to cancel this booking') > -1){
   //replace THIS button onclick event
}

这是A标签的样子

<a href="/view.php?booking=AIZLZ9&amp;cancel=t" class="replaced_btn" onclick="return confirm('Click OK to cancel this booking.\n\nCancellation fees may be payable.\nSee the Terms and Conditions.');" ></a>

Answer 1

如果只有这两个链接，你可以这样做：

$('a.replaced_btn').eq(0).click(function(){
    confirm('Click OK to cancel this booking.\n\nCancellation fees may be payable.\nSee the Terms and Conditions.');
});

$('a.replaced_btn').eq(1).click(function(){
    confirm('Do you want to cancel this service?\nClick \'OK\' to continue.  Click \'Cancel\' if you do not wish to proceed.');
});

修改：

var links = $('a.replaced_btn'); for(var l = 0; l < links.length; l++){ if($(links[l]).attr('onclick').match("Click OK to cancel")) $(links[l]).attr('onclick', 'return confirm(some other message)'); else //Do you want to cancel... $(links[l]).attr('onclick', 'return confirm(yet another message)'); }

这是解决这个问题的一种非常奇怪的方法，但似乎是你要求的。基本上使用onclick检查.attr()属性，并针对确认消息的已知值执行match。然后，您可以将onclick属性（也使用.attr()）设置为其他内容。

Answer 2

我通常做这样的事情的方法是在链接上定义自定义数据属性，然后听取任何链接的点击。当click事件触发并且我的函数运行时，我可以使用事件中引用的单击链接上的data属性来执行操作。

我发现这种方式的事件管理比在元素本身上使用onClick更清晰。

这可能是这样的：

<a href="#" class="replaced_btn" data-message="Click OK to cancel this booking.\n\nCancellation fees may be payable.\nSee the Terms and Conditions.">Cancel booking</a>
<a href="#" class="replaced_btn" data-message="Do you want to cancel this service?\nClick \'OK\' to continue.  Click \'Cancel\' if you do not wish to proceed.">Cancel service</a>

<script type="text/javascript">
    $("a.replaced_btn").on("click", function (e) {
        //Let the event bubble, but prevent the anchor from jumping to the top of the page
        e.preventDefault();

        //React to the specific link
        alert($(e.target).data("message"));
    });
</script>

请注意，代码未经测试。

希望这有助于解决您的问题。

使用jQuery的.data（）方法获取HTML5数据属性的文档：https://api.jquery.com/data/#data-html5

从jQuery事件对象获取clicked-element的文档：https://api.jquery.com/event.target/

修改1

你也可以使用一个属性来切换功能，这是我觉得非常有用的东西：

<a href="#" class="replaced_btn" data-type="cancel-booking">Cancel booking</a>
<a href="#" class="replaced_btn" data-type="cancel-service">Cancel service</a>

<script type="text/javascript">
    $("a.replaced_btn").on("click", function (e) {
        //Let the event bubble, but prevent the anchor from jumping to the top of the page
        e.preventDefault();

        //React to the specific link
        switch ($(e.target).data("type")) {
            case "cancel-booking":
                //Handle this case
                break;
            case "cancel-service":
                //Handle this case
                break;
        }
    });
</script>

请注意，此代码也未经过测试。

修改2

因此，如果您使用此代码段，它将为您添加数据类型属性，然后您可以使用它执行任何您需要识别链接的内容，包括我在上面写的内容。

$("a.replaced_btn").each(function (idx, el) {
    if ($(el).attr("onclick").indexOf("Click OK to cancel this booking") > -1) {
        $(el).data("type", "cancel-booking");
    } else if ($(el).attr("onclick").indexOf("Do you want to cancel this service") > -1) {
        $(el).data("type", "cancel-service");
    }
});

或者，跳过添加数据类型属性并在函数内处理特定于链接的逻辑。

编辑3

这是一个JSFiddle，显示您可以遍历链接并根据其onclick属性的内容对它们执行单独的功能：

https://jsfiddle.net/2xa7xk32/

（同样在编辑2中将第二个更改为else-if）

Answer 3

如果href属性是唯一可以依赖的元素，那么这就是你需要使用的东西。下面是一个简单的例子，但由于我们不知道其他链接是什么样的，或者页面上的所有其他链接，因此无法确切地知道URL中的关键字。可能需要更改为使用正则表达式。

$("a").click(function(){
    if(this.href.indexOf('booking') != -1){
    alert("Booking link clicked")
  }
    if(this.href.indexOf('service') != -1){
    alert("Service link clicked")
  }
return false;
});

此外，您需要首先删除现有的点击处理程序：

  $("a").each(function() {
    if (this.href.indexOf('booking') != -1 || this.href.indexOf('service') != -1) {
      $(this).attr("onclick", "").unbind("click");
    }
  });

否则，内联点击处理程序和点击处理程序都将运行。

jQuery寻找onClick值并替换动态html

3 个答案: