用 jQuery/AJAX 替换 Div 内容 - 带有按钮 ID [关闭]答案

【问题标题】：Replace Div content with jQuery/AJAX - with button ID [closed]用 jQuery/AJAX 替换 Div 内容 - 带有按钮 ID [关闭]
【发布时间】：2014-10-28 02:16:03
【问题描述】：

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

我的问题是我需要一种方法让每个按钮都有自己的 ID 号，这样当 jQuery 收到更改问题的请求时，它会转到一个特定文件，其中包含一个与按钮上的 ID 号匹配的新问题。所以每个按钮都会有一个对应于新问题的 ID。

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

【问题讨论】：

Retrieving ids of chid divs using jquery? 的可能重复项

标签： javascript jquery ajax html

【解决方案1】：

“有没有办法从单击的按钮中检索 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 来演示。

【讨论】：

脚本在第一次从主页替换内容时完美运行，但是当我尝试用另一个按钮再次替换该内容时没有任何反应。知道为什么它不会第二次替换内容吗？
如果您还没有弄清楚这一点，请使用您最近的代码发布一个新问题，并在此处发布新问题的链接以通知我。

【解决方案2】：

只是添加到上面的答案。如果 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 
    });
});

【讨论】：