-1

我正在开发一个应用程序，其中包含一些具有诸如a1、a2、a3等 ID 的 DIV。通过单击下一个和上一个按钮可以一次在屏幕上显示一个 Div，可以选择导航 DIV 。strong text还有两个动作：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 
var originalSet = $('.answers');
var container = originalSet.up() ;
var byId = function(a, b){
    return $(a).attr('id') > $(b).attr('id') ? 1 : -1;
}
originalSet
    .order(byId)
    .each(function rearrangeIds(position){
          $(this).attr({
              'index': poition,
              'id': '_a'+position
          });
    }).appendTo(container)
于 2013-06-18T11:57:06.817 回答
0

为什么不保留当前打开的页面而不是索引并使用 jQuery 树遍历方法搜索上一页和prev()下一页next()？

于 2013-06-18T12:02:52.693 回答
0

选择所有包含问题的 div 元素，最好使用 css 类选择器，使用 each 方法，并为它们分配新的 id：

$('.questionDiv').each(function(index) { $(this).attr('id', 'a' + (index + 1)); })

这应该足够了。

于 2013-06-18T12:08:21.127 回答