Javascript onclick显示/隐藏多行(动态内容)

Question

我有一个用户列表，管理员可以在其中批准/删除。对于这两个操作，我使用show/hide onclick来执行代码。但在多行中，单击任何操作按钮都会显示/隐藏内容。我想要圆形行的动作按钮，点击该按钮即可显示/隐藏内容。我该如何解决这个问题？这是我的视图代码laravel刀片，

<script>
function showhide() {  
var div = document.getElementById("collapse1");  
if (div.style.display !== "none")   
div.style.display = "none";  
else  
div.style.display = "block";  
}  
</script>       

内容：

<div>
<button href="#collapse1" class="btn btn-success nav-toggle"  onclick="showhide()">Action</button>
</div>
@if($user->approved == 0)
<div id="collapse1" style="display:none">
<span>
<a href="{!! route('approve', ['id' => $user->id]) !!}"><img alt="" src="http://www.clker.com/cliparts/l/n/a/E/b/t/check-mark-button-hi.png" 
style="height: 48px; width: 48px"  /></a>
</span><br/>
@else
<span>
<a href="{!! route('decline', ['id' => $user->id]) !!}">
<img alt="" src="https://images.onlinelabels.com/images/clip-art/TzeenieWheenie/TzeenieWheenie_red_green_OK_not_OK_Icons_1.png" 
style="height: 48px; width: 48px"/>
</a>
</span>
</div>
@endif

脚本

@pushonce('custom-scripts')
<script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
@endpushonce

Answer 1

它与id冲突
您需要更改id:

id="collapse1" => id="collapse{$user->id}"

js和html函数https://jsfiddle.net/ft9xprnb/3/。点击链接可以看到结果，编辑内容函数：elem.getAttribute("href")

function showhide(elem) 
{  
console.log(elem.getAttribute("href"));
var div = document.getElementById(elem.getAttribute("href").replace("#", ""));
if (div.style.display !== "none") {  
div.style.display = "none";  
}  
else {  
div.style.display = "block";  
}  
} 

Answer 2

您可以在html 中传递this

<button href="#collapse1" class="btn btn-success nav-toggle"  onclick="showhide(this)">Action</button>

然后在JS 中

function showhide(elem) 
{  
var div = document.getElementById(elem.href.replace("#", ""));  
if (div.style.display !== "none") {  
div.style.display = "none";  
}  
else {  
div.style.display = "block";  
}  
}  

这样，您将传递给click的elem将成为click元素。

Answer 3

尝试将内容更改为此

<div>
<button href="#collapse1" class="btn btn-success nav-toggle" onclick="showhide()">Action</button>
</div>
<div id="collapse1" style="display:none">
@if($user->approved == 0)
<span>
<a href="{!! route('approve', ['id' => $user->id]) !!}">
<img alt="" src="http://www.clker.com/cliparts/l/n/a/E/b/t/check-mark-button-hi.png" style="height: 48px; width: 48px"/>
</a>
</span>
<br/>
@else
<span>
<a href="{!! route('decline', ['id' => $user->id]) !!}">
<img alt="" src="https://images.onlinelabels.com/images/clip-art/TzeenieWheenie/TzeenieWheenie_red_green_OK_not_OK_Icons_1.png" style="height: 48px; width: 48px"/>
</a>
</span>
@endif
</div>