Question

我想制作切换按钮。我从数据库中获取数据并且每个供认（类似于博客的容器）都有facebook评论框。我只想制作一个按钮来隐藏或取消隐藏Facebook评论框，但它不起作用。我附上了我的网页截图。

<?php
$id="0";
$sql="SELECT * FROM user_confession";
require 'connection.php';
$result = mysqli_query($conn, $sql);
  if (mysqli_num_rows($result)>0)
  {


                                    while($row = mysqli_fetch_array($result))
                                    {
                                        $date= $row['date1'];
                                        $confession= $row['confession'];
                                        $userid=$row['id'];


echo"<div style='border: 2px solid black;width: 85%;margin-left:55px;overflow: hidden;margin-top: 10px; '>
</div>";

echo"<div id='confession_container'>";
        echo"<div id='date'>";
            echo $date;
        echo"</div>";

    echo"<div  id='confession_content'>
        #confession no'"; echo $id=$id+1;echo"

        <p style='margin-bottom: 10px;'>";echo $confession; echo"</p>";
        $id='confession'.$userid;

        echo" <button onclick='myFunction('confession20')'>Comment</button>";

        echo"<div id='confession20' class='fb-comments' data-href='https://developers.facebook.com/docs/plugins/comments#configurator1' data-numposts='5'></div>


    </div>
</div>";
}
}
?> 




<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.11&appId=1554032561304520';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>     

<script type="text/javascript">

function myFunction(p1) 
{   
    console.log(p1);
    var x = document.getElementById(p1);
    if (x.style.display === "none") 
    {
        x.style.display = "block";
    } 
    else {
        x.style.display = "none";
    }
}

</script>

Answer 1

您案例的工作示例jsfiddle。

实际上在您的情况下发生了什么fb-root div没有分配样式属性，因此当您尝试获取x.style.display属性时，它会返回为空所以你的if条件不匹配，总是进入else块。所以我只是将style="display:none;"属性分配给div标签，它现在正在运行。

第一种方式

<强> HTML

<button id="btnToggle">Toggle Hidw Show</button>
<div id="fb-root" style="display:none;">
  <h2>Zebra</h2>
  <p>Here is a paragraph about zebras.</p>
</div>

javascript代码

document.getElementById("btnToggle").onclick = function() {
  myFunction('fb-root');
}


function myFunction(p1) 
{   
    console.log(p1);
    var x = document.getElementById(p1);
    if (x.style.display === "none") 
    {
        x.style.display = "block"; 
    } 
    else {
        x.style.display = "none";
    }
}

第二种方式

<强> HTML

<button id="btnToggle">Toggle Hidw Show</button>
<div id="fb-root">
  <h2>Zebra</h2>
  <p>Here is a paragraph about zebras.</p>
</div>

javascript代码

document.getElementById("btnToggle").onclick = function() {
  myFunction('fb-root');
}


function myFunction(p1) 
{   
    console.log(p1);
    var x = document.getElementById(p1);
    if (x.style.display === "none" || x.style.display === "") 
    {
        x.style.display = "block"; 
    } 
    else {
        x.style.display = "none";
    }
}

Answer 2

试试这个

<script>
    $(function () {
        $("#showHideCommentBox").click(function (e) {
            e.preventDefault();
            var divToHideOrShow = $("#myCommentBoxDiv")
            if (divToHideOrShow.css("display") == "none") {
                divToHideOrShow.show();
            }
            else {
                divToHideOrShow.hide();
            }
        });
    });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id="showHideCommentBox">Mostrar/Ocultar</button>

** #myCommentBoxDiv是要隐藏或显示的div ** #showHideCommentBox是按钮

切换按钮隐藏或取消隐藏Facebook评论框

2 个答案: