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，所以对于新的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's混在一起，而是链接收音机，并且它与其他方式相关联，而IMO最好的方法是使用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()！

更改div的ID以显示/隐藏

1 个答案: