javascriptのボタンで隠しHTMLを表示

Question

私のレールアプリに隠れたdivフィールドを表示するのに問題があります。

# application.js file 
    $(document).ready(function() { 
    $(document).on("click", "button.click-c", function() { 
     $("div.refresh").show(); 
     console.log("is this going to console") 
     //$("div.refresh").toggle(); 
     //alert("test"); 
    }); 
    }); 

表示ページ：：私が持っているapplciation.css用も

<button type="button" class="click-c" onclick="click">click</button> 
<div id="refresh" class="hidden" > 
    <p> hidden content line <%= display info %> </p> 
</div> 

：以下のコードであるJSコードの場合

.hidden { display: none; } 

が、私は.toggleと.SHOWの両方を試してみました。ボタンはアラート（「テスト」）を処理しており、コンソールにも印刷しています。ボタンをクリックしたときに隠れ線が表示されないのはなぜですか？

Answer 1

@Pavanは、あなたがする必要があると述べたようにJSコード

$("div.refresh").show(); 

が

$("div#refresh").show(); 

Answer 2

であるべきあなたはrefreshとしてidでのdivを定義しましたが、あなたはclass nameとしてそれを使用しています変更class。 ＃idから [あなたは1つのボタンと1つのrefresh.hiddenの要素を持っている場合Pavanの答えが正解である] ..しかし、あなたは複数のボタンと隠し要素

を持っている場合、IdはとてもIDを重複しない一意である必要があります。 。次のデモをご覧ください

//# application.js file 
 
$(document).ready(function() { 
 
    $(document).on("click", "button.click-c", function() { 
 
    $("div.hidden").not($(this).next('div.hidden')).hide(); 
 
    console.log("is this going to console") 
 
    $(this).next('div.hidden').slideToggle(); 
 
    //alert("test"); 
 
    }); 
 
});

.click-c{ 
 
    display: block; 
 
} 
 
.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button type="button" class="click-c">click</button> 
 
    <div id="refresh1" class="hidden"> 
 
    <p> hidden content line <%= display info %> </p> 
 
</div> 
 
<button type="button" class="click-c">click</button> 
 
    <div id="refresh2" class="hidden"> 
 
    <p> hidden content line <%= display info %> </p> 
 
</div> 
 
<button type="button" class="click-c">click</button> 
 
    <div id="refresh3" class="hidden"> 
 
    <p> hidden content line <%= display info %> </p> 
 
</div>