Question

我创建了4个div，并分配了一个变量'i'，表示div的数量。如果我删除一个div，变量'i'应该减少而不刷新网页（动态）。 This is what I mean

这是代码

var i = 0;
$(document).ready(function () {
$(document).on('click', '#new-mcq', function () {
    if (i == 0)
        $(".insert-question-container").html('');

    i++;
    createdDivs++;
    mcqCount++;
    $(".insert-question-container").append('<div class="add-question-new" id="' + i + '"><div class="add-question-close"><span class="close-btn-mcq" id="' + i + '"></span></div><div class="add-question-name">'+i+'Multiple Choice Question</div><div class="add-question-text"><textarea class="inputs-textarea" name="mcq-question-'+i+'" placeholder="Enter Question here" name="mcq-question' + mcqCount + '"></textarea></div><div class="add-question-option"><input type="text" class="inputs-correct" name="mcq-choice-'+i+'.c" placeholder="Enter correct answer" name="mcq-answer' + mcqCount + '"/></div><div class="add-question-option"><input type="text"class="inputs" name="mcq-choice-'+i+'.1" placeholder="Other Choice 1" name="mcq-answer' + mcqCount + '"/></div><div class="add-question-option"><input type="text"class="inputs" name="mcq-choice-'+i+'.2" placeholder="Other Choice 2" name="mcq-answer' + mcqCount + '"/></div><div class="add-question-option"><input type="text"class="inputs" name="mcq-choice-'+i+'.3" placeholder="Other Choice 3" name="mcq-answer' + mcqCount + '"/></div></div>').show('slow');
    //alert("MCQ: "+mcqCount);   
    });
});


$(document).on('click', '.close-btn-mcq', function () {
    var id = $(this).attr("id");
    var className = $(".add-question-new").attr("id");
    $("#" + id).remove();
    //alert(id);
    deletedDivs++;
    mcqCount--;
    i--;
    //alert("i = " + i);
    //alert("mcq = " + mcqCount);
    if (createdDivs == deletedDivs)
        i = 0;

});

HTML

<div class="insert-question-container">

</div>
<div class="add-question-btn-container">
            <p align="left">Add Question: </p>            
            <button class="btn-newquestion" type="button" id="new-mcq">Multiple Choice</button>
            <button class="btn-newquestion" type="button" id="new-tf">True / False</button>
            <button class="btn-newquestion" type="button" id="new-sa">Short Answer</button>
            <button class="btn-newquestion" type="button" id="new-mtc">Match Column</button>               
       </div>

Answer 1

为什么不算一下你拥有的DIV数量？

$(".add-question-new").length

将为您提供该班级的元素数量。

$("DIV.add-question-new").length

会让你只计算那个班级的div。

$("DIV.add-question-new.deleted").length

会为您提供.add-question-new和.deleted等级的DIVS计数。因此，如果他们将其标记为已删除，您只需将已删除的类应用于它。它看起来像

<DIV class="add-question-new deleted">

然后使用CSS，您可以保留它或将其删除{DIV.add-question-new.deleted: display:none;}（或不执行任何操作）。

这样你取决于页面上元素的实际数量 - 而不是跟踪一个可能是正确的 - 可能 - 不是一个计数器，它应该代表你可以通过研究DOM。

Answer 2

我发现了三个主要问题。

您正在递增的变量未定义，请参阅javascript代码顶部的更改。没有任何初始值，则无法增加或减少值。见补丁1
您的关闭问题按钮没有任何内容（我添加了一个X来点击）。见补丁2
您需要一种更新问题编号的方法。我添加了每个函数来更新问题数字。见补丁3

链接到jsfiddle：http://jsfiddle.net/larryjoelane/bjenoe0c/

Javascript代码更改：

    var i = 0;

/*begin patch # 1: You variable were not defined*/

//define createdDivs<-fixes not defined error
var createdDivs;

//define mcqCount<-fixes not defined error
var mcqCount;

//define deletedDivs<-fixes not defined error
var deletedDivs;

/*end patch 1*/

$(document).ready(function () {
$(document).on('click', '#new-mcq', function () {
    if (i == 0)
        $(".insert-question-container").html('');

    i++;
    createdDivs++;
    mcqCount++;

    /*patch 2: added text to close-btn-mcq, it can not be clicked
      if there is no content
    */
    $(".insert-question-container").append('<div class="add-question-new" id="' + i + '"><div class="add-question-close"><span class="close-btn-mcq" id="' + i + '">|X|</span></div><div class="add-question-name">'+i+'Multiple Choice Question</div><div class="add-question-text"><textarea class="inputs-textarea" name="mcq-question-'+i+'" placeholder="Enter Question here" name="mcq-question' + mcqCount + '"></textarea></div><div class="add-question-option"><input type="text" class="inputs-correct" name="mcq-choice-'+i+'.c" placeholder="Enter correct answer" name="mcq-answer' + mcqCount + '"/></div><div class="add-question-option"><input type="text"class="inputs" name="mcq-choice-'+i+'.1" placeholder="Other Choice 1" name="mcq-answer' + mcqCount + '"/></div><div class="add-question-option"><input type="text"class="inputs" name="mcq-choice-'+i+'.2" placeholder="Other Choice 2" name="mcq-answer' + mcqCount + '"/></div><div class="add-question-option"><input type="text"class="inputs" name="mcq-choice-'+i+'.3" placeholder="Other Choice 3" name="mcq-answer' + mcqCount + '"/></div></div>').show('slow');
    //alert("MCQ: "+mcqCount);   
    });
});


$(document).on('click', '.close-btn-mcq', function () {
    var id = $(this).attr("id");
    var className = $(".add-question-new").attr("id");
    $("#" + id).remove();
    //alert(id);
    deletedDivs++;
    mcqCount--;
    i--;

    /*patch 3: add each function to change question numbers
    */
    $(".add-question-name").each(function(i){//begin each function

        //update the question number
        $(this).html((i + 1) + " Multiple Choice Question");

    });//end each function


    //debug only
    alert("i = " + i);
    //alert("mcq = " + mcqCount);



    if (createdDivs == deletedDivs)
        i = 0;

});

在var i中维护div的数量

2 个答案: