。奇怪行爲的jQuery中的.hide（）和.show（）

Question

我有3個不同的<section> s不同的塊。 您只能在第一個區塊的<option>之後選擇第二個。 以及第三，只有從0123秒選擇<option>。

從第一個箱子的變化工作正常。 但在第二個盒子裏，一切只能用於第三個塊的第一個第二個<section> s。

我試圖找出原因，因爲這兩個框的功能非常相似，我自己的調試還沒有給我帶來勝利。

http://jsfiddle.net/A1ex5andr/3Lv1f2a8/

$(document).ready(function() { 

    var sel2 = '#sel2'; 
    var sel3 = '#sel3'; 

    $('#sel1').change(function() { 
     var selected = $('#sel1 option:selected').attr('id'); 
     var target = "#sel2_"; 
     var sel2New = target + (selected.substr(selected.length-1, 1)); 

     $(sel2New).show(); 
     $(sel2).hide(); 
     sel2 = sel2New; 

    }); 

    $('.sel2').change(function() { 
     var selectedMid = $(this).attr('id'); 
     var target_Middle = (selectedMid.substr(selectedMid.length-1, 1)); 
     var selected = $(this).find(":selected").attr('id'); 
     var target = (selected.substr(selected.length-1, 1)); 
     var sel3New = "#sel3_" + target_Middle + '_' + target ; 

     $(sel3New).show(); 
     $(sel3).hide(); 
     sel3 = sel3New; 
    }); 

}); 

Answer 1

的原因，一些你的3級列表都沒有顯示出來是因爲ID不匹配。

例如，以下聲明是正確的：

<select id="sel3_1_2"> 

以下一個不正確：

<select id="sel_3_1_3"> 

通知SEL和之間的額外的下劃線。如果你在sel_到sel找到替代代碼，我相信一切都應該開始按照你的預期工作。

Answer 2

這是因爲第3個區塊中的某些選區上的ID以sel_3*開頭，而在您嘗試訪問的JavaScript中您的JavaScript sel3*。

Answer 3

你真的需要重構你的代碼！

var myList = [{ 
 
    value: 'A', 
 
    title: 'Value A', 
 
    children: [{ 
 
     value: 'a', 
 
     title: 'Small value A', 
 
     children: [ 
 
      { value: '1', title: 'Value 1' }, 
 
      { value: '2', title: 'Value 2' }, 
 
      { value: '3', title: 'Value 3' } 
 
     ] 
 
    },{ 
 
     value: 'b', 
 
     title: 'Small value B', 
 
     children: [ 
 
      { value: '4', title: 'Value 4' }, 
 
      { value: '5', title: 'Value 5' }, 
 
      { value: '6', title: 'Value 6' } 
 
     ] 
 
    }] 
 
},{ 
 
    value: 'B', 
 
    title: 'Value B', 
 
    children: [{ 
 
     value: 'c', 
 
     title: 'Small value C', 
 
     children: [ 
 
      { value: '7', title: 'Value 7' }, 
 
      { value: '8', title: 'Value 8' }, 
 
      { value: '9', title: 'Value 9' } 
 
     ] 
 
    },{ 
 
     value: 'd', 
 
     title: 'Small value D', 
 
     children: [ 
 
      { value: '10', title: 'Value 10' }, 
 
      { value: '11', title: 'Value 11' }, 
 
      { value: '12', title: 'Value 12' } 
 
     ] 
 
    }] 
 
}]; 
 

 
function createSelect($parent, list) { 
 
    var $select = $('<select>'); 
 
    
 
    if ($parent.is('select')) { 
 
     $select.insertAfter($parent); 
 
    } else { 
 
     $select.appendTo($parent); 
 
    } 
 
    
 
    $.each(list, function() { 
 
     $('<option>') 
 
      .data('children', this.children) 
 
      .attr('value', this.value) 
 
      .text(this.title || this.value) 
 
      .appendTo($select); 
 
    }); 
 
    
 
    $select.on('change', function() { 
 
     var $self = $(this); 
 
     var childList = $self.children('option:selected').data('children'); 
 
     $self.nextAll().remove(); 
 
     if (!childList) return; 
 
     createSelect($self, childList); 
 
    }); 
 
    
 
    $select.trigger('change'); 
 
} 
 

 
function addNone(list) { 
 
    list.unshift({ value: '-' }); 
 
    $.each(list, function() { 
 
     if (!this.children) return; 
 
     addNone(this.children); 
 
    }); 
 
} 
 

 
addNone(myList); 
 

 
createSelect($('#selectGroup'), myList);

select { 
 
    margin: 5px 0; 
 
    border-radius: 7px; 
 
    background: #5a5772; 
 
    color:#fff; 
 
    border:none; 
 
    outline:none; 
 
    cursor:pointer; 
 
    width: 203px; 
 
    height: 50px; 
 
    box-sizing: border-box; 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="selectGroup"></div>