在菜单/按钮之间切换

Question

所以我有这个菜单，你可以在我的游戏中选择职业。

<div class="text">
<div id="story">Choose a class.</div>
<input type="button" class="knight" value="Knight"/>
<input type="button" class="mage" value="Mage"/>
<input type="button" class="archer" value="Archer"/>
</div>

如何使用 jquery 以便当我按下这些按钮中的任何一个时，我会得到一组新的按钮，你可以按下这些按钮来选择你的种族？

我已经尝试过.replaceWith()，但 jquery 无法在新按钮上运行。 它将需要 css。

function classChange() {
    var Class = $(this).val();
    $('#statsImg').text("class: " + Class);
    $('.knight').replaceWith('<input type="button" class="elf value="Elf"/>');
    $('.mage').replaceWith('<input type="button" class="human" value="Human"/>');
    $('.archer').replaceWith('<input type="button" class="Dwarf" value="Dwarf"/>');
    $('.menu').show();
};

$('.knight').click(classChange);
$('.mage').click(classChange);
$('.archer').click(classChange);

按钮elf 不会对下一部分做任何事情：

$('.elf').on('click', '.elf',function () {
    $('#statsImg').text('test');
});

适用于按钮knight/mage/archer。

所以我想知道的是，一旦我按下一个按钮，如何摆脱这个菜单并获得一个新菜单？

抱歉，如果我忘记添加您需要知道的内容。需要的话我会加的。

Answer 1

添加事件后，您必须将事件bind 发送到按钮。试试 -

$('.knight').replaceWith('<input type="button" class="elf value="Elf"/>').bind('click', function() {
    $('#statsImg').text('test');
});