显示和隐藏 div onclick答案

【问题标题】：show and hide div onclick显示和隐藏 div onclick
【发布时间】：2016-09-24 13:13:43
【问题描述】：

我创建这段代码来显示和隐藏 div 这段代码可以工作，但是当我将它与 php 一起使用时，当我单击第一个 div 的显示时，他向我展示了 div 但是当我点击第二个时，他告诉我第一个而不是第二个如何解决这个问题？

    include("connect.php");
    $sql=mysqli_query($conn,"select * from tbl_codelibrary order by db_id desc")or die(mysqli_error($conn));
  echo'<div id="no-more-tables">
            <table class="col-md-12 table-bordered table-striped table-condensed cf">
                <thead class="cf">';
echo"<tr>";
echo"<th style='background:#f7ac01;font-size:13px;vertical-align: middle;text-align:center' rowspan='2'>Title</th>
<th style='background:#f7ac01;font-size:13px;vertical-align: middle;text-align:center' rowspan='2'>Code</th>";
 echo"</tr></thead><tbody>";          
    while($row=mysqli_fetch_array($sql)){
        $title=$row['db_title'];
        $code=$row['db_code'];
echo"<tr>";
echo"<td data-title='Title'>";echo $title;echo'<div id="opener"><a href="#1" name="1">Show Code</a></div>';echo"<br/>";echo'<div id="upbutton"><a onclick="return hide();">Hide Code</a></div>'; echo"</td>";         
echo"<td data-title='Code'>";echo"<pre><code class='' >&lt;";?><?php echo $row['db_code'];?><?php echo"&gt;</code></pre>";echo"</td>";          
    }
    ?>
            </body>

        <script> 
            function show() { 
                if(document.getElementById('benefits').style.display=='none') { 
                    document.getElementById('benefits').style.display='block'; 
                } 
                return false;
            } 
            function hide() { 
                if(document.getElementById('benefits').style.display=='block') { 
                    document.getElementById('benefits').style.display='none'; 
                } 
                return false;
            }   
        </script>

【问题讨论】：

你可以使用.toggle()来显示和隐藏
Javascript show element on click的可能重复
@guradio 那是一个 jQuery 函数..
@Xorifelse 它被标记为 jQuery
@VishnuBhadoriya 没有为一个 div 复制我的代码工作，但是当我在 php 中有一个循环时，他为第一个工作，另一个显示第一个 div，而不是与点击相关的 div

标签： javascript php mysql

【解决方案1】：

您正在循环中创建一个 html，您使用的是固定 id 值而不是动态值。这会导致 id 冲突。因此，您的代码将无法按预期工作。这总是只取页面的第一个 id。

我根据您的要求写了一些动态内容如下：

    <style>
    .buttonCode{
        border:1px solid #000;
        background-color:#ccc;
        border-radius:5px;
    }
    </style>
    <?php
    for($i=0;$i<3;$i++) {
        $title = "Title-".$i;
        $content = "Content-".$i;
        echo $title;
        echo'<br>';
        echo'<a class="showContent buttonCode">Show Code</a>';
        echo'&nbsp;&nbsp;';
        echo'<a class="hideContent buttonCode">Hide Code</a>'; 
        echo'<br>';
        echo"<pre><code class='benefits' style='display:none;'>&lt;".$content."&gt;</code></pre>";
        echo'<br>';
    }
    ?>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    $('.showContent').on('click', function(e) {
    $(this).nextAll(':has(.benefits):first').find('.benefits').show();
    });
    $('.hideContent').on('click', function(e) {
    $(this).nextAll(':has(.benefits):first').find('.benefits').hide();
    });
    </script>

希望这会对你有所帮助。

如果您只希望使用 javascript，那么您可以执行以下操作：

    <style>
    .buttonCode{
        border:1px solid #000;
        background-color:#ccc;
        border-radius:5px;
    }
    </style>
    <?php
    for($i=0;$i<3;$i++) {
        $title = "Title-".$i;
        $content = "Content-".$i;
        echo $title;
        echo'<br>';
        echo'<a class="buttonCode" onclick="showbenefit('.$i.')">Show Code</a>';
        echo'&nbsp;&nbsp;';
        echo'<a class="buttonCode" onclick="hidebenefit('.$i.')">Hide Code</a>'; 
        echo'<br>';
        echo"<pre><code class='benefits' id='benefits-".$i."' style='display:none;'>&lt;".$content."&gt;</code></pre>";
        echo'<br>';
    }
    ?>
    <script> 
    function showbenefit(s) { 
        if(document.getElementById('benefits-'+s).style.display=='none') { 
            document.getElementById('benefits-'+s).style.display='block'; 
        } 
        return false;
    } 
    function hidebenefit(h) { 
        if(document.getElementById('benefits-'+h).style.display=='block') { 
            document.getElementById('benefits-'+h).style.display='none'; 
        } 
        return false;
    }
    </script>

【讨论】：

这个问题对jquery有什么要求吗？

【解决方案2】：

        function show_hide(){ 
            if(document.getElementById('benefits').style.display=='none') { 
                document.getElementById('benefits').style.display='block'; 
            } 
			else if(document.getElementById('benefits').style.display=='block') { 
                document.getElementById('benefits').style.display='none'; 
            }
          
        }

<div id="benefits" style="display:block">test</div>
  <a href="javascript:void" onclick="show_hide() ">Submit</a>

你好！希望对您有所帮助！

p.s 你可以使用 .toggle() 在 JQuery 中显示和隐藏

【讨论】：