使用jQuery/AJAX替换Div内容 - 使用按钮ID

我正在构建一个类似于“选择您自己的冒险”类型游戏的网站。在页面上，会有三个不同的选择（作为按钮）给用户。当他们点击按钮时，jQuery和AJAX将用单独的HTML文件中的新问题替换问题文本。所有按钮都将被替换，并将写入该单独的HTML文件中。使用jQuery/AJAX替换Div内容 - 使用按钮ID

我的问题是，我需要一种方法让每个按钮都有自己的ID号码，以便当jQuery获取请求来更改问题时，它将转到具有匹配按钮上ID号的新问题的特定文件。所以每个按钮都会有一个对应于新问题的ID。

总之：有没有办法从点击的按钮中检索ID或数据属性，并将该信息传递到我的jQuery/AJAX函数？谢谢！

来源

2014-10-27 Philip Bradley

烨有吨[使用jQuery检索享有一定的div的编号吗？]的 – 2014-10-27 17:51:30

可能重复（http://stackoverflow.com/questions/2599971/retrieving-ids-of-chid-divs-using-jquery ） – Machavity 2014-10-27 17:54:14

“是否有方法从点击的按钮中检索ID或数据属性，并将该信息传递到我的jQuery/AJAX函数中？”

有几种方法可以做到这一点。这是最简单的方法之一：

<div class="button" id="button1">Click Me</div> 

var clicked = ''; 

$('.button').click(function() { 
    clicked = $(this).attr('id'); 
    window.alert('You clicked: '+clicked); 
});

这里有一个JSFiddle证明。

来源

2014-10-27 17:53:47 APAD1

非常感谢！ – 2014-10-28 00:44:48

当从主页中替换内容时，该脚本第一次完美运行，但是当我尝试用另一个按钮再次替换该内容时，什么也没有发生。任何想法为什么它不会第二次替换内容？ – 2014-10-31 16:47:31

如果你还没有弄明白这一点，用你最近的代码发布一个新问题，并在这里发布一个链接到新的问题来通知我。 – APAD1 2014-11-03 19:15:54

只需添加到上面的答案。如果您的HTML文件名称与按钮ID相同，则可以将其直接添加到您的AJAX请求中。

<div class="button" id="button1">Click Me</div> 

$('.button').click(function() { 
    var $this = $(this).attr('id'), 
    url = 'includes/' + $this + '.html'; // Select file url 
    $.post(url, function(data) {   
     $('#target_div').html(data).show(); // Display external file to target div 
    }); 
});

来源

2014-10-27 18:16:03 user3674465

非常感谢！ – 2014-10-28 00:45:49

使用jQuery/AJAX替换Div内容 - 使用按钮ID

回答

相关问题