-1

a1、a2、a3などのID を持ついくつかの DIV を含むアプリケーションに取り組んでいます。一度に 1 つの Div を画面に表示する次と前のボタンを押すことでDIV をナビゲーションするオプションがあります。strong textさらに 2 つのアクションがあります: AddとRemoveです。Add は、最後の ID よりも大きい ID を持つ Div を追加します。たとえば、最後の DIV id がa3の場合、 Add はa4をもたらします。

本当の問題は、現在の DIV を削除することです。ユーザーが Div a2 にいて、Remove.remove()オプションをクリックすると、jQuery のメソッドを使用して現在の Div が削除されます

シーケンシャルであるため、ナビゲーションが壊れます。Div a2を見つけようとしますが、見つかりません。残りのすべての DIV の ID の名前を変更する必要があると思います。a2がないので、a3はa2になるはずです。どうやってやるの？さまざまなタスクを実行するコードを以下に示します。

function removeQuestion()
{
    $("#_a"+answerIndex).remove();
    if(answerIndex > 1)
    {
        if ($("#_a"+(++answerIndex)).length > 0)
        {
            $("#_a"+answerIndex).appendTo("#answerPanel");
        }
        else if($("#_a"+(--answerIndex)).length)
        {
            $("#_a"+answerIndex).appendTo("#answerPanel");
        }
        totalOptions--;
    }
}


function addQuestion()
{
    var newId = 0;
    totalOptions++;
    var d = 1;
    newId = totalOptions;
    var _elemnew = '_a'+newId;
    $("#_a"+d).clone().attr('id', '_a'+(newId) ).appendTo("#answers_cache");
    var h = '<input onclick="openNote()" id="_note'+newId+'" type="button" value=" xx" />';
    $("#"+_elemnew+" .explain").html(h)
    $("#"+_elemnew+" ._baab").attr("id","_baab"+newId);
    $("#"+_elemnew+" ._fx").attr("id","_fasal"+newId);
    $("#"+_elemnew+" .topic_x").attr("id","_t"+newId);
    $("#"+_elemnew+" .topic_x").attr("name","_t"+newId);
    $("#"+_elemnew+" .answerbox").attr("id","_ans"+newId);
    $("#"+_elemnew+" .block").attr("onclick","openFullScreen('_ans"+newId+"')");

    $('.tree').click( function() 
      {
        toggleTree();
      }
    );
      $('.popclose').click( function() 
      {
        unloadPopupBox();
      }
    );
}

function next()
{
    console.log("Next ->");
    if(answerIndex < totalOptions)
    {
        answerIndex++;
        console.log(answerIndex);
        setInitialAnswerPanel();
    }
}
function previous()
{
    console.log("Next <-");
    if(answerIndex > 1)
    {
        answerIndex--;
        console.log(answerIndex);
        setInitialAnswerPanel();
    }
}

Composite DIV の Html を以下に示します。

<div class="answers" id="_a1" index="1">
                <input placeholder="dd" id="_t1" type="text" name="_t1" class="urduinput topic_masla" value="" />
                <img class="tree" onclick="" src="tree.png" border="0" />
                <label class="redlabel">
                   xx                 :
                </label>
                <label id="_baab1" class="baabfasal _baab">
                </label>
                <label  class="redlabel">
                    xx                     :
                </label>
                <label id="_fasal1" class="baabfasal _fasal">
                </label>
                <a title=" ddd" class="block" href="#" onclick="openFullScreen('_ans1')">
                    <img src="fullscreen.png" border="0" />
                </a>
                <textarea id="_ans1" class="answerbox" cols="40"   rows="15"></textarea>
                <span class="explain">
                    <input onclick="openNote()" id="_note1" type="button" value=" xx" />
                </span>
                <span style="float:left;padding-top:5%">
                    <a href="#" onclick="addQuestion()">plus</a> | <a onclick="removeQuestion()" href="#">minus</a>  
                </span>
            </div>
4

3 に答える 3

0

インデックスの代わりに現在開いているページを保持しprev()、next()jQuery ツリー トラバーサル メソッドを使用して前後のページを検索してみませんか?

于 2013-06-18T12:02:52.693 に答える