更改div的id以显示/隐藏

Question

我的旧代码看起来像这样：

function unhide(rad) {
var id = "answer" + rad.id.replace("-", "");
var answer = document.getElementById(id);
if (answer) {
    var current = document.getElementById(currentShown);
    if (current) current.className = "hidden";
    currentShown = id;
    answer.className = "unhidden";
}
}

单击我的单选按钮时：

<input class="editable" type="radio" name="q1" id="q1-a" onclick="unhide(this); scoreIncrement(this);"/>John

它将显示此div：

<div id="answerq1a" class="hidden">
<p>Your answer is correct, John is 6ft2.</p>
</div>

但现在，我的单选按钮必须如下所示：

<input class="editable" type="radio" name="q1" id="untitled-region-1" onclick="unhide(this); scoreIncrement(this);"/>John

我想要取消隐藏的div具有相同的id，但因为它们是唯一的，所以它用下一个数字替换了1。在我的例子中，它是4 id's down，所以id对于新id应该是“untitled region-5”，如下所示：

<div id="untitled-region-5" class="hidden">
<p>Your answer is correct, John is 6ft2.</p>
</div>

那么，我如何修改这段代码，获取新的id“untitled region-5”并从中减去4，从而将其固定到具有新id的单选按钮上呢？

function unhide(rad) {
var id = "answer" + rad.id.replace("-", "");
var answer = document.getElementById(id);
if (answer) {
    var current = document.getElementById(currentShown);
    if (current) current.className = "hidden";
    currentShown = id;
    answer.className = "unhidden";
}
}

我正在沿着这样的轨道前进：

function unhide2(rad) {
var id = $("div").attr('id').replace(/untitled-region-/, 'untitled-region-');
var untitled-region = document.getElementById(id);
if (untitled-region) {
    var current = document.getElementById(currentShown);
    if (current) current.className = "hidden";
    currentShown = id;
    untitled-region.className = "unhidden";
}
}

但是我不知道如何用" digit -4“替换id上的最后一个数字。

Answer 1

您已经使用jQuery对此进行了标记，因此我将给您jQuery答案。

解决这个问题的正确方法不是与id混杂在一起，而是链接无线电，它以其他方式与div相关联，而最好的方法是使用data-属性。

<input class="editable" type="radio" 
   name="q1" id="q1-a" data-answerId="untitled-region-5"/>John

然后你的javascript就变得容易了-就像：

$('.editable').click(function(){
   $('#' + currentShown).removeClass('unhidden').addClass('hidden');
   var answerId = $(this).data('answerId');
   $('#' + answerId).removeClass('hidden').addClass('unhidden');
});

尽管我强烈建议你去掉unhidden，hidden的混乱，只使用.show()和.hide()！