隱藏/顯示相同的div

-1

我想隱藏各種div元素，但是我想讓它變爲動態，所以如果我取消選擇，那麼它會在瀏覽器中顯示備份。這很容易顯示/隱藏，但我的問題是，我需要顯示/隱藏一些相同的領域。它適用於第一次選擇，但第二次運行它不會做任何事情，因爲它認爲它應該按照第一次運行中的'.show（）'顯示它。隱藏/顯示相同的div

任何人都可以指向正確的方向嗎？

感謝 S.

<script> 
$(document).ready(function(){ 
    $('#nat').on('change', function() { 
     if (this.value == 'no_nat') 
     { 
     $("#field25").hide(); 
     $("#field26").hide(); 
     } 
     else 
      { 
     $("#field25").show(); 
     $("#field26").show(); 
     } 
    }); 
}); 
</script> 

<script> 
$(document).ready(function(){ 
    $('#nat2').on('change', function() { 
     if (this.value == 'no_nat') 
     { 
     $("#field25").hide(); 
     $("#field26").hide(); 
     } 
     else 
      { 
     $("#field25").show(); 
     $("#field26").show(); 
     } 
    }); 
}); 
</script>

HTML這樣的：

<div class="form-row"> 
    <label> 
     <span>Test1</span> 
     <select name="field1" id="nat"> 
     <option value="" selected="selected"></option> 
     <option VALUE="no_nat">1</option> 
     <option VALUE="nat">2</option> 
     </select> 
    </label> 
</div> 
<div class="form-row"> 
    <label> 
     <span>Test2</span> 
     <select name="field2" id="nat2"> 
     <option value="" selected="selected"></option> 
     <option VALUE="no_nat">1</option> 
     <option VALUE="nat">2</option> 
     </select> 
    </label> 
</div> 
<div class="form-row" id='field25'> 
    <label> 
    <span>Test3</span> 
    <input name="field25" type="text"> 
    </input> 
    </label> 
</div> 
<div class="form-row" id='field26'> 
    <label> 
    <span>Test4</span> 
    <input name="field26" type="text"> 
    </input> 
    </label> 
</div>

來源

2016-05-17 captain yossarian

請提供完整的HTML也 –

能否請你告訴，這裏是ID爲 'NAT' 和 'NAT2';其實，我不明白你想表達什麼 – Sinto

你並不需要定義$（文件）。就緒兩次。試試這個：

<script> 
$(document).ready(function(){ 
    $('#nat').on('change', function() { 
     if (this.value == 'no_nat') 
     { 
     $("#field25").hide(); 
     $("#field26").hide(); 
     } 
     else 
      { 
     $("#field25").show(); 
     $("#field26").show(); 
     } 
    }); 

    $('#nat2').on('change', function() { 
     if (this.value == 'no_nat') 
     { 
     $("#field25").hide(); 
     $("#field26").hide(); 
     } 
     else 
      { 
     $("#field25").show(); 
     $("#field26").show(); 
     } 
    }); 
}); 
</script>

見小提琴https://jsfiddle.net/r2m9s8gx/

來源

2016-05-17 11:20:56

嘗試

$(this).val() === 'no_nat'

或

$('#nat').val() === 'no_nat'

來源

2016-05-17 11:22:17 Vishal

你可以嘗試有一個單一的處理器一樣

$(document).ready(function() { 
 
    $('select[name="field1"], select[name="field2"]').on('change', function() { 
 
    var state = $('select[name="field1"]').val() == 'no_nat' || $('select[name="field2"]').val() == 'no_nat'; 
 
    $("#field25, #field26").toggle(state); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-row"> 
 
    <label> 
 
    <span>Test1</span> 
 
    <select name="field1"> 
 
     <option value="" selected="selected"></option> 
 
     <option VALUE="no_nat">1</option> 
 
     <option VALUE="nat">2</option> 
 
    </select> 
 
    </label> 
 
</div> 
 
<div class="form-row"> 
 
    <label> 
 
    <span>Test2</span> 
 
    <select name="field2" type="text"> 
 
     <option value="" selected="selected"></option> 
 
     <option VALUE="no_nat">1</option> 
 
     <option VALUE="nat">2</option> 
 
    </select> 
 
    </label> 
 
</div> 
 
<div class="form-row" id='field25'> 
 
    <label> 
 
    <span>Test3</span> 
 
    <input name="field25" type="text" /> 
 
    </label> 
 
</div> 
 
<div class="form-row" id='field26'> 
 
    <label> 
 
    <span>Test4</span> 
 
    <input name="field26" type="text" /> 
 
    </label> 
 
</div>

來源

2016-05-17 11:42:40

隱藏/顯示相同的div

回答

相關問題