使用jQuery邏輯問題

Question

Fiddle

我想「複製」 HTML結構，改變類一個元素和「粘貼」吧。

類是div-1（第12行中的HTML窗口）在第一和應該由一個數，每一個新追加增加，div-2，div-3 e.g等相反的每一個元素是div-1。

不介意刪除無法正常工作。我有時間給這個小提琴一點風格，但沒時間做基本的功能工作。這是無關緊要的，無所謂。

我使代碼儘可能簡單，廢棄了大量代碼，我希望它很容易閱讀和理解！

Answer 1

我已經解決了您的問題，請嘗試以下的jQuery代碼： -

我已經在你的代碼，這些行： -

$("#all .div-wrap:last-child .div-1").addClass("div-"+newCount).removeClass("div-1"); 

你修改jQuery代碼： -

jQuery(function($) { 

    var prevCount = 0; 
    var newCount = 2; 
    var newClass = 'div-' + newCount; 
    var prevClass = 'div-' + prevCount; 

    //This should toggle red sqare color but it doesn't! 
     $(document).on('click',' .random-div', function (event) { 
     event.preventDefault(); 
     $('.random-div').toggleClass('green'); 
     }); 

    //New cat click 
    $('.new-cat').click(function (event) { 
     event.preventDefault(); 
     //"Copy" form 
     divGroup = $('.divs').html(); 
     //"Paste" it below old one 
     $('#all').append('<div class="div-wrap">' + divGroup + '</div>'); 


     NewClass = 'div-' + newCount; 
     prevClass = 'div-' + prevCount; 

     $("#all .div-wrap:last-child .div-1").addClass(NewClass).removeClass("div-1"); 

     //Testing 
     console.log('newClass: ' + NewClass); 
     console.log('prevClass: ' + prevClass); 
     console.log('------------'); 
     console.log('newCount: ' + newCount); 
     console.log('prevCount: ' + prevCount); 

     //Change class in order to instansiate Dropzone 
     //$(this).closest(prevClass).attr('class', NewClass); 


     //Instanciate Dropzone. 
     /* 
     $('.' + newClass).dropzone() { 

     //Not the point of this problem but it works for only 1st appended element because other elements are 
     also named "div-1" <- it should increase with every "get a new one" click "div-2", "div-3" etc. 

     }; 
     */ 




     //Increase counters by 1 in order to give next target 1 number bigger class 
     newCount++; 
     prevCount++; 

    }); 




    //Not related stuff, just for functionality but still: take a peek just in case! 

    //Delete cat  
    $('.delete-cat').on('click', function(event) { 
     event.preventDefault(); 
     var countCats = $('.maiden-form').length; 
     if (countCats > 1) { 
     $(this).closest('.divs').remove(); 
     } 
     else { 
     alert('Cmon! Its your last form - dont delete it! And yes, I know how to use upper comma in code, Im just tired after about 5 hours of trying to solve this problem. I hope you can help me! :)'); 
     } 
    }); 

}); 

它可以幫助你。

Answer 2

你的問題歸結爲你的使用$(this).closest(prevClass).attr('class', NewClass)的和有3個問題：

1. $(prevClass)永遠不會工作，因爲它需要$('.' + prevClass)。

2. 要添加每次新div-1是你按一下按鈕，但這$(prevClass)不是找div-1，它在尋找div-2，div-3，等於是$(prevClass)應該$('.div-1')。

3. （選配），使用jQuery的.addClass和.removeClass而非attr財產，因爲前者將保留其他類已添加到的元素。

這裏有一個正常jsfiddle for you

至於未來的建議，我建議你看像角的js框架，讓你沒有做那麼多困難的低層次的DOM操作一樣添加/刪除/克隆元素。它變得毛茸茸的！