Question

我的问题对于jquery爱好者来说非常简单，但对我来说很难。我有简单的a href标记，其中包含数据属性。

<a href="#/one" data-menu-button="menu1" class="button">menu 1</a>
<a href="#/two" data-menu-button="menu2" class="button">menu 2</a>

// etc

我也有非常简单的ajax调用脚本。

$(".button").click(function(){
        $.ajax({url: "test.php", success: function(result){
           $(".page").html(result);
        }});
});

我的问题：

如何用点击的按钮数据atrribute替换ajax url？例如，正如您所见，我现在有url: "test.php"。我需要的是将test更改为数据属性（例如：menu1），但保留.php扩展名。我需要该脚本找到点击的数据atrribute，并将其替换为test。也许$(this)可行吗？

感谢您的回答，对不起英语感到抱歉。

Answer 1

您可以使用 .data() 从数据属性中获取值。

使用$(this).data('menu-button')从data-menu-button获取，然后将.php附加到其中。它看起来像menu1.php。 $(this)将引用被点击的当前元素。

您还必须使用e.preventDefault()来阻止页面导航到href属性中存在的任何内容。除非你想要页面url有这些片段。

$(".button").click(function(e){
    e.preventDefault();
    $.ajax({url: $(this).data('menu-button') + '.php', success: function(result){
       $(".page").html(result);
    }});
});

Answer 2

您已经猜到使用$(".button").click(function(){ var url = $(this).attr('data-menu-button') + '.php'; $.ajax({url: url, success: function(result){ $(".page").html(result); }}); })来访问该元素，然后{{1}}来获取该属性值。

{{1}}

将ajax url替换为具有data属性的clicked元素

2 个答案: