的JavaScript自動隱藏/顯示DIV不工作

我試圖自動隱藏使用下面的代碼，這樣它們才能顯示/隱藏在單擊選擇選項在JavaScript的div：的JavaScript自動隱藏/顯示DIV不工作

//hiding the divs 
$(document).ready(function(){ 
    function hide(){ 
     $(".atm").hide(); 
     $(".bank").hide(); 
    } 
    hide(); 
});

至於原因，我不知道，代碼不起作用（divs仍然沒有隱藏）。下面是代碼的其餘部分（它工作正常，只有上面的代碼是不是hidding的div）

//here's my html code for div 
<div class="atm">ATM</div> 
<div class="bank">Bank</div> 

//here's my select code 
<select name="type" id="document-type" onchange="showOptions(this)"> 
    <option value="ATM">ATM</option> 
    <option value="Bank">Bank</option> 
</select> 

//and here's my javascript code for displaying the hidden divs 
function showOptions(s) { 
    var val = s.options[s.selectedIndex].value; 
    if(val === "ATM"){ 
     hide(); 
     $(".atm").slideDown(400); 
    }else 
    if(val === "Bank"){ 
     hide(); 
     $(".bank").slideDown(400); 
    } 
};

任何地方我要去/做錯了什麼？

來源

2017-02-10 Kenn

請編輯您的問題以顯示相關的HTML。你有沒有在頁面中包含jquery.js？你在瀏覽器的控制檯中是否有錯誤？ – nnnnnn

顯示HTML和明顯的問題是否添加了對庫的引用？ – Satpal

哪裏是選擇和哪裏是變化事件？ – madalinivascu

檢查這個答案在這裏

$(document).ready(function(){ 
 
      $(".atm").hide(); 
 
      $(".bank").hide(); 
 
      $('select').on('change',function(){ 
 
       if($('select').val()=='atm'){ 
 
        $('.atm').show(); 
 
        $('.bank').hide(); 
 
       } 
 
       else if($('select').val()=='bank'){ 
 
        $('.bank').show(); 
 
        $('.atm').hide(); 
 
       } 
 
      }); 
 
});

<html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script></head> 
 
    <body> 
 
<select><option value="atm">ATM</option><option value="bank">Bank</option></select> 
 
<div class="atm">ATM</div> 
 
<div class="bank">BANK</div>

來源

2017-02-10 05:46:06

爲什麼您的代碼在OP沒有的情況下工作？爲什麼他們的代碼不能按原樣工作？ – nnnnnn

對不起。 OP的？那是什麼意思？ –

對不起，** O ** riginal ** P ** oster，提問的人。 – nnnnnn

綁定change事件到您選擇

$(document).ready(function(){ 
 
     function hide(){ 
 
      $(".atm").toggle(); 
 
      $(".bank").toggle(); 
 
     } 
 
     $('select').on('change',hide).trigger('change'); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="atm">atm</div> 
 
<div class="bank">bank</div> 
 
<select> 
 
<option>select</option> 
 
    <option>select</option> 
 
</select>

來源

2017-02-10 05:47:09 madalinivascu

更新未解決的任務離子 -
將以下代碼複製到一個text.html文件，並運行一個瀏覽器，並讓我們知道結果：

<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> 
function hide() 
{ 
    $('.atm').hide(); 
    $('.bank').hide(); 
} 


//and here's my javascript code for displaying the hidden divs 
function showOptions(s) { 
    var val = s.options[s.selectedIndex].value; 
    if(val === "ATM"){ 
     hide(); 
     $(".atm").slideDown(400); 
    }else 
    if(val === "Bank"){ 
     hide(); 
     $(".bank").slideDown(400); 
    } 
}; 
</script> 
</head> 
<body> 
//here's my html code for div 
<div class="atm">ATM</div> 
<div class="bank">Bank</div> 

//here's my select code 
<select name="type" id="document-type" onchange="showOptions(this)"> 
    <option value="ATM">ATM</option> 
    <option value="Bank">Bank</option> 
</select> 
</body> 
</html>

根據問題的更新，請參閱在年底更新：

JS的長相罰款對我來說，工作的例子在下面 - 可能是你的HTML：

（做你的div的HTML中有類= 'ATM' &類= '銀行'？）

$(document).ready(function() 
 
{ 
 
    function hide() 
 
    { 
 
    $(".atm") .hide(); 
 
    $(".bank").hide(); 
 
    $('.btnHideShow').text('Show'); 
 
    } 
 
    function show() 
 
    { 
 
    $(".atm") .show(); 
 
    $(".bank").show(); 
 
    $('.btnHideShow').text('Hide'); 
 
    } 
 
    $('.btnHideShow').click(function() 
 
    { 
 
    if($('.atm').is(':hidden')) 
 
    { 
 
     show(); 
 
    } 
 
    else 
 
    { 
 
     hide(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='atm'>Div ATM</div> 
 
<div class='bank'>Div Bank</div> 
 
<button class="btnHideShow">Hide</button>

使用select：

$(document).ready(function() 
 
{ 
 
    function hide() 
 
    { 
 
    $(".atm") .hide(); 
 
    $(".bank").hide(); 
 
    $('.btnHideShow').text('Show'); 
 
    } 
 
    function show() 
 
    { 
 
    $(".atm") .show(); 
 
    $(".bank").show(); 
 
    $('.btnHideShow').text('Hide'); 
 
    } 
 
    $('.sel').change(function() 
 
    { 
 
    //console.log($(this).val()); 
 
    var val = $(this).val(); 
 
    if(val === 'None') 
 
    { 
 
     hide(); 
 
    } 
 
    else 
 
    if(val === 'Bank-ATM') 
 
    { 
 
     show(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='atm'>Div ATM</div> 
 
<div class='bank'>Div Bank</div> 
 
<select class="sel"> 
 
    <option>Bank-ATM</option> 
 
    <option>None</option> 
 
</select>

在你更新你離開你的隱藏功能的問題：（？你包括jQuery的LIB）

function hide() 
 
{ 
 
    $('.atm').hide(); 
 
    $('.bank').hide(); 
 
} 
 

 

 
//and here's my javascript code for displaying the hidden divs 
 
function showOptions(s) { 
 
    var val = s.options[s.selectedIndex].value; 
 
    if(val === "ATM"){ 
 
     hide(); 
 
     $(".atm").slideDown(400); 
 
    }else 
 
    if(val === "Bank"){ 
 
     hide(); 
 
     $(".bank").slideDown(400); 
 
    } 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
//here's my html code for div 
 
<div class="atm">ATM</div> 
 
<div class="bank">Bank</div> 
 

 
//here's my select code 
 
<select name="type" id="document-type" onchange="showOptions(this)"> 
 
    <option value="ATM">ATM</option> 
 
    <option value="Bank">Bank</option> 
 
</select>

來源

2017-02-10 05:57:36

我已經包含了jquery庫，並且hide（）函數仍然存在 – Kenn

它變得破舊 – Kenn

請將我答案頂部的代碼複製到text.html中，並告訴我它是否在瀏覽器中運行（希望Chrome）... –

$(document).ready(function(){ 
    $(".atm").hide(); 
    $(".bank").hide(); 
    $('select').change(function(){ 
     $(".atm").toggle(); 
     $(".bank").toggle(); 
    }). 
});

試試這個。這會在頁面加載時隱藏分類，然後在改變選擇框後顯示。 toggle（）函數用於隱藏和顯示元素。

來源

2017-02-10 06:02:43

的JavaScript自動隱藏/顯示DIV不工作

回答

相關問題