Javascript 动态隐藏div单击另一个div 函数bookRetr（str）{ 如果（str==“”）{ document.getElementById（“更多信息”）.innerHTML=“”； 返回； } if（window.XMLHttpRequest）{ //IE7+、Firefox、Chrome、Opera、Safari的代码 xmlhttp=新的XMLHttpRequest（）； } 否则{ //IE6、IE5的代码 xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）； } xmlhttp.onreadystatechange=函数（）{ if（xmlhttp.readyState==4&&xmlhttp.status==200）{ document.getElementById（“更多信息”）.innerHTML=xmlhttp.responseText； } } open（“GET”、“showbook.php？id=“+str，true”）； xmlhttp.send（）； } 01 02 03

这个脚本运行良好，完成了我想要的工作，加载图书信息并将它们加载到id

more info

。但是，当我单击div class

bookProp

时，我还想隐藏/删除div class

booknowholder

。我尝试了一些jQuery代码，但没有任何效果。提到div类

bookProp

实际上是由PHP while循环生成的，因此条目的数量是动态的

您说您正在使用jQuery，但我在您的代码中没有看到任何jQuery。但是，如果要在jQuery中隐藏某些元素，可以执行以下操作：

<script type="text/javascript">
    function bookRetr(str) {
        if (str == "") {
            document.getElementById("more-info").innerHTML="";
            return;
        } 

        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("more-info").innerHTML=xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET","showbook.php?id="+str,true);
        xmlhttp.send();
    }
</script>

<div class="bookProp" id="one" onClick="bookRetr(this.id)">
    <div class="booknoHolder" id="in">&nbsp;01&nbsp;</div>
</div>

<div class="bookProp" id="two" onClick="bookRetr(this.id)">
    <div class="booknoHolder" id="in">&nbsp;02&nbsp;</div>
</div>

<div class="bookProp" id="three" onClick="bookRetr(this.id)">
    <div class="booknoHolder" id="in">&nbsp;03&nbsp;</div>
</div>     

$('.booknoHolder').hide();

如果要在单击

bookProp

时隐藏

booknowholder

元素，只需执行以下操作：

<script type="text/javascript">
    function bookRetr(str) {
        if (str == "") {
            document.getElementById("more-info").innerHTML="";
            return;
        } 

        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        }
        else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("more-info").innerHTML=xmlhttp.responseText;
            }
        }

        xmlhttp.open("GET","showbook.php?id="+str,true);
        xmlhttp.send();
    }
</script>

<div class="bookProp" id="one" onClick="bookRetr(this.id)">
    <div class="booknoHolder" id="in">&nbsp;01&nbsp;</div>
</div>

<div class="bookProp" id="two" onClick="bookRetr(this.id)">
    <div class="booknoHolder" id="in">&nbsp;02&nbsp;</div>
</div>

<div class="bookProp" id="three" onClick="bookRetr(this.id)">
    <div class="booknoHolder" id="in">&nbsp;03&nbsp;</div>
</div>     

$('.booknoHolder').hide();

---

您可以在此处找到更多信息：

对于jQuery解决方案，请尝试以下方法：

$(function() {
    $('body').on('click', '.bookProp', function() {
        $(this).find('.booknoHolder').hide();
    });
});

函数bookRetr（str）{
//通过AJAX获取HTML
$.get（'showbook.php？id='+str，函数（html）{
$（“#更多信息”）.html（html）；
});
//假设.bookProp附加在#更多信息中
$（“#更多信息”）。在（'click'，'.bookProp'，函数（）上{
$（'.booknowholder'，$（this））.hide（）；
});
}

此方法有用吗

function bookRetr(str) {
        if (str == "") {
            document.getElementById("more-info").innerHTML="";
            return;
        } 

        $("#" + str + " .booknoHolder").hide();
        ...

---

我尝试了你的代码，但是当我点击一个bookProp div时，其他所有的booknowholder都被删除了。我希望相应的div booknocholder删除.use$（this）.find（'.booknocholder'）.hide（）。啊，刚才看到editid应该是唯一的，您使用的是相同的id。在div上有相同的

id=“in”

，与

booknowholder

classyes.。但是如果您能给我一个建议，我可以使其动态化。我的div是由php脚本动态生成的，那么我如何以这种方式编码呢？