2016-10-03 74 views
0

我有代碼:如何創建/隱藏的JavaScript

<a href='' type="button" class="<?php if($row->status==0) { echo 'btn btn-circle blue btn-sm hidden';} else { echo 'btn btn-circle blue btn-sm';}?>">View</a> 
 
               

如何使用JavaScript或jQuery的改變上面的代碼?

回答

0

類似的東西應該工作(我假定你有多個項目)

您的看法:

<a href='' type="button" data-status="<?=$row->status; ?>" class="btn btn-circle blue btn-sm">View</a> 

JS代碼

$(document).ready(function() 
{ 
    $("a.btn.btn-circle").each(function(index) { 
     if ($(this).attr("data-status") == 1) $(this).addClass("hidden"); 
    }); 
}); 

在這裏確定更新答案呃與整個腳本 ,你會看到「無法查看」按鈕被隱藏 - 如果你想是這樣的點擊和隱藏,因爲他有 data-status="1"

$(document).ready(function() 
 
{ 
 
    $("a.btn.btn-circle").each(function(index) { 
 
     if ($(this).attr("data-status") == 1) $(this).addClass("hidden"); 
 
    }); 
 
});
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <title>Bootstrap 101 Template</title> 
 

 
    <!-- Bootstrap --> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
    </head> 
 
    <body> 
 
    <a href='' type="button" data-status="1" class="btn btn-circle blue btn-sm">not View</a> 
 
<a href='' type="button" data-status="0" class="btn btn-circle blue btn-sm">View</a> 
 

 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<!-- Include all compiled plugins (below), or include individual files as needed --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
</body> 
 
</html>

+0

你的代碼錯誤 –

+0

爲了幫助你,我需要你得到的錯誤類型;) – sintakonte

+0

你的代碼沒有影響按鈕 –

0

$("#view").hide(); 
 
$("#toggle").click(function(){ 
 
$("#view").toggle(); 
 
}) 
 
$("#view").click(function(){ 
 
$("#view").hide(); 
 
}) 
 

 

 
$("#Show").click(function(){ 
 

 
$("#view").show(); 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="toggle"> 
 
Toggle to show or hide 
 
</div> 
 

 
<div id="Show"> 
 
Show 
 
</div> 
 
<div id="view"> 
 
Hide 
 
</div>