在 ajax 调用加载的页面上隐藏多个

Hide multiple <div> on page loaded by ajax call till button click

本文关键字：隐藏 ajax 调用 加载      更新时间：2023-09-26
，直到单击按钮。

我已经在SO上看到了类似的线程。

我index.php单击按钮url.php以index.php中存在的<div>通过 ajax 加载

url.php有几个<div>.我希望其中一些仅在单击按钮后可见。我得到了解决方案。但只有 1div 变得可见 其余隐藏是因为z-index财产吗？

索引.php：

<script>
$("#load_url").click(function(){
    $.ajax({
        url:"url.php",
        success:function(response) {
            $("#view_port").html(response);
            $("#load_url").hide();
        }
    }); 
});
function show2() {
   //alert("hi");
    document.getElementById("txtHint").style.display = "block";
    document.getElementById("rateit99").style.display = "block";
    document.getElementById("cb1").style.display = "block";
}
</script>

网址.php

   <body style="height: 560px">
      <div class="rateit bigstars" id="rateit99"  style="z-index: 1; display:none;" ><b>Rate Me </b></label>
      </div>
     <label2 color="red" id="l1" style="z-index: 1; left: 438px; display:none; top: 180px; position:absolute" ><b><u>Add comment</u> </b></label2>
    <form action="data.php" method="POST" onsubmit="showUser(this, event)">
    <div style="z-index: 1; left: 420px; top: 40px; position: absolute; margin-top: 0px">           
    <label>Enter URL: <input type="text" id="t1" value="http://www.paulgraham.com/herd.html" name="sent" style="width: 400px; height:40px;" ></label><br/>
    </div>
    <div style="z-index: 1;" >  <button onclick="show2();"> Get Sentiment </button>         
    </div>
    </form>
    <div style="z-index: 1; left: 720px; top: 110px; position: absolute; margin-top: 0px">   
    </div>
    <h4>
   <div id="txtHint" align="justify" style="z-index: 3;  ">         </h4>
         </div>
<div class="fb-comments" id='cb1'"  ></div>
</div>
      </body>

单击"获取情绪"按钮时。只有 id="txtHint" 和 lable Rate me 出现。

cb1，rateit99仍然不可见，这里的错误是什么？

链接到完整代码：

索引.phphttp://codetidy.com/6857/

网址.phphttp://codetidy.com/6858/

这不是

答案，而是因为我无法评论-实际上，这是由于css冲突而发生的。尝试通过类不显示每个这样的元素，然后应用直接样式作为您的操作。您还可以使用 ！important 来提供更高的优先级。

相关文章：