0

我的旧代码如下所示：

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";
}
}

但我不知道如何将 id 上的最后一位数字替换为“digit-4”。

4

1 回答 1

0

你已经用 jQuery 标记了这个，所以我会给你 jQuery 的答案。

解决这个问题的正确方法不是与 id 混搭，而是链接收音机，并以其他方式关联 div，而 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()and .hide()！

于 2012-04-04T11:28:57.783 回答