Question

我有一个管理员可以批准/拒绝的用户列表。对于这两个操作，我使用show / hide oncllick代码可以工作。但是在多行中任何操作按钮onclick它显示/隐藏内容。我希望特定行的动作按钮显示/隐藏内容，点击该按钮。我该如何解决这个问题？这是我的视图代码laravel blade，

<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的元素将是被点击的元素。

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>

Javascript onclick显示/隐藏多行（动态内容）

3 个答案: