0

在此之后，我必须在单击事件上一个一个地添加 2 个 div，添加按钮将被禁用，当我删除第一个或第二个添加的 div 时，添加按钮将被启用这是我的代码.. 这是jsfiddle

HTML

<a id="addMoreroom" class="fnt-size13" href="#">+ Add Rooms</a>
<div id="roomDiv-1" class="rowG clearfix hide">                                              
    <label>Selected Room Type</label>
        <select>
           <option>1</option>
        </select>
    <label>Number Of Rooms</label>
        <select>
           <option>3</option>
        </select>
    <a id="rmoveRoom_1" class="fnt-size13" href="#">- Remove</a>
</div>
<div id="roomDiv-2" class="rowG clearfix hide">                                            
    <label>Selected Room Type</label>
        <select>
           <option>1</option>
        </select>
    <label>Number Of Rooms</label>
        <select>
           <option>3</option>
        </select>
    <a id="rmoveRoom_2" class="fnt-size13" href="#">- Remove</a>
</div>

jQuery

$("#addMoreroom").click(function () {
    $('#roomDiv-1').addClass('show');
    $('#addMoreroom').attr('id', 'addMoreroom1');
    $("#addMoreroom1").click(function () {
        $('#roomDiv-2').addClass('show');
        $(this).hide();
        return false;
    });
});
$("#rmoveRoom_1").click(function () {
    $('#roomDiv-1').remove();
    $('#addMoreroom1').show();
    return false;
});

$("#rmoveRoom_2").click(function () {
    $('#roomDiv-2').remove();
    $('#addMoreroom').show();
    $('#addMoreroom1').attr('id', 'addMoreroom');
    return false;
});
});

问题是每当我单击删除按钮时，循环都会被吸走并且添加按钮将不可见请给我一些建议..

4

4 回答 4

0

这是您的工作代码：

html:

<a id="addMoreroom" class="fnt-size13" href="#">+ Add Rooms</a>
  <div id="parentroom">
  </div>

查询：

$(document).on("click","#addMoreroom",function() {
            var div1=$('#roomDiv-1').html();
              if($("#parentroom #roomDiv-1").length>1){                  
                $("#addMoreroom").attr('disabled',true);   
              }else{
                $("#parentroom").append("<div id='roomDiv-1' class='rowG clearfix hide'><label>Selected Room Type</label><select><option>1</option></select><label>Number Of Rooms</label><select><option>3</option></select><a id='rmoveRoom_1' class='fnt-size13' href='#'>- Remove</a></div>");
           }
      });                  
     $("#parentroom").on("click","#rmoveRoom_1",function() {
         if($(this).parent().index()==0 ||$(this).parent().index()==1){
            $("#addMoreroom").prop('disabled',false);
         }
         $(this).closest($("#parentroom #roomDiv-1")).remove();
            return false;

        });

演示：http: //jsfiddle.net/M7nM8/

于 2013-10-31T10:00:36.313 回答
0

使用 jquery 的show()andhide()和toggle()函数，你不必定义自己的 css，因为这些函数会处理它..

http://api.jquery.com/show/

于 2013-10-31T08:02:24.757 回答
0

如果可能，我强烈建议您不要嵌套.click();事件处理程序。他们倾向于欺骗 AJAX 请求并在嵌套时做各种古怪的事情。

本例中的示例：

$("#addMoreroom").on("click", function () {
    $('#roomDiv-1').addClass('show');
    $('#addMoreroom').attr('id', 'addMoreroom1');
});

$("#rmoveRoom_1").on("click", function () {
    $('#roomDiv-1').remove();
    $('#addMoreroom1').show();
});

$("#addMoreroom1").on("click", function () {
    $('#roomDiv-2').addClass('show');
    $(this).hide();
});

$("#rmoveRoom_2").on("click", function () {
    $('#roomDiv-2').remove();
    $('#addMoreroom1').attr('id', 'addMoreroom');
    $('#addMoreroom').show();
});

我也认为return false;没有必要，我主要用它来根据条件终止函数。为什么使用.on();？.live();已弃用，您正在动态更改 DOM。

Fiddle 对我不起作用，但我认为您可能会收到不存在 ID 的错误。

最终编辑，增加了添加按钮的可见性，小提琴http://jsfiddle.net/9aBAe/2/：

$(document).on("click","#addMoreroom", function () {
    if($('#roomDiv-1').css("display") == "none")
    {            
        $('#roomDiv-1').show();
    }
    else if($('#roomDiv-2').css("display") == "none")
    {
        $('#roomDiv-2').show();
    }
});

$(document).on("click","#rmoveRoom_1", function () {
    $('#roomDiv-1').hide();
});

$(document).on("click","#rmoveRoom_2", function () {
    $('#roomDiv-2').hide();
});

$(document).on("click","a", function () {
    if($('#roomDiv-1').css("display") == "none" && $('#roomDiv-2').css("display") == "none")
    {
        $("#addMoreroom").show();        
    }
    else if ($('#roomDiv-1').css("display") == "none" || $('#roomDiv-2').css("display") == "none")
    {
       $("#addMoreroom").show(); 
    }
    else
    {
        $("#addMoreroom").hide();     
    }

});
于 2013-10-31T07:10:20.923 回答
0

这是你问我猜的。这个链接。这是代码。

var addRoomCounter = 2;
$("#addMoreroom").click(function () {
    if(addRoomCounter == 2)
    {    
        $('#roomDiv-1').show();
    }
    if(addRoomCounter == 1)
    {    
        $('#roomDiv-2').show();
        $(this).hide();
    }
    addRoomCounter=addRoomCounter-1;
});

$("#rmoveRoom_1").click(function () {
    $('#roomDiv-1').hide();
    if(addRoomCounter == 0)
    {
        $('#addMoreroom').show();
    }
    addRoomCounter=addRoomCounter+1;
});

$("#rmoveRoom_2").click(function () {
    $('#roomDiv-2').hide()
    if(addRoomCounter == 0)
    {
        $('#addMoreroom').show();
    } 
    addRoomCounter=addRoomCounter+1;
});

你只做错了一件事。您对元素使用删除功能。它从 html 文档中删除元素。所以你不能再打电话了。在我的情况下，我只是用 removeClass('show') 替换删除函数并调用 addClass('hide')

于 2013-10-31T07:23:35.407 回答