htmlでjqueryの条件をチェックし、値に基づいてリストを選択してください

Question

HTMLを変数に基づいて表示するリストを決定する必要があります。どのようにSTATUSが

<ul> 
<li>Link 2 </li> 
</ul> 

をPENDINGされていない場合、STATUSは

<ul> 
<li>Link 1 </li> 
</ul> 

を保留している場合、私は、HTMLでチェックjqueryの条件を持っているし、リストを選択値に基づいて

HTML

<input type="hidden" id="agencyCertificationStatus" value="Pending"/> 

<script> 
var agencyCertificationStatus = $("#agencyCertificationStatus").val(); 
</script> 

ん

Answer 1

基本的には、切り替えるHTMLにクラスや他の識別子を追加するだけです。次に、javascriptで条件文を使用して、表示する条件文を決定します。

Javascriptを

var agencyCertificationStatus = $("#agencyCertificationStatus").val(); 

if (agencyCertificationStatus === "pending") { 
    $(".pending").show(); 
} 
else { 
    $(".not-pending").show(); 
} 

HTML

<ul class="pending status"> 
    <li>Link 1 </li> 
</ul> 
<ul class="not-pending status"> 
    <li>Link 2 </li> 
</ul> 

CSS

.status { 
    display: none; 
} 

Answer 2

は、最初のリンクの両方を非表示にします。そして、入力値の表示/要素を隠す

var agencyCertificationStatus = $("#agencyCertificationStatus").val(); 
 

 
agencyCertificationStatus === 'PENDING' ? $('.pending').show() : $('.notPending').show()

.pending, 
 
.notPending { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="hidden" id="agencyCertificationStatus" value="Pending" /> 
 
<ul> 
 
    <li class='pending'>Link 1 </li> 
 
    <li class='notPending'>Link 2 </li> 
 
</ul>

Answer 3

に応じて、あなたはこれが李

<ul> 
    <li id="linkLi"> Link </li> 
</ul> 


<input type="hidden" id="agencyCertificationStatus" value="Pending"/> 
<script> 
var agencyCertificationStatus = $("#agencyCertificationStatus").val(); 
if('PENDING' == agencyCertificationStatus){ 
    $("#linkLi").text('Link 1') 
}else { 
    $("#linkLi").text('Link 2') 
} 

</script>