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 に答える