javascript - 在其他 div 上动态隐藏 div

Question

<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>     

该脚本运行良好并完成了我想要的工作，加载书籍信息并将它们加载到 id more-info。booknoHolder 但是当我单击div 类时，我还想隐藏/删除div 类bookProp。我尝试了一些 jQuery 代码，但没有任何效果。值得一提的是，div 类bookProp实际上是由 PHP while 循环生成的，因此条目的数量是动态的。

Answer 1

您说您正在使用 jQuery，但我在您的代码中没有看到任何 jQuery。但是如果你想在 jQuery 中隐藏一些元素，你可以这样做：

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

如果您想booknoHolder在单击 a 时隐藏元素bookProp，只需执行以下操作：

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

你可以在这里找到更多信息：http: //api.jquery.com/on/

Answer 2

对于 jQuery 解决方案，试试这个：

<script type="text/javascript">
    function bookRetr(str) {
        // Get the HTML via AJAX
        $.get('showbook.php?id=' + str, function(html) {
            $("#more-info").html(html);
        });

        // Assuming .bookProp is appended inside #more-info
        $('#more-info').on('click', '.bookProp', function() {
            $('.booknoHolder', $(this)).hide();
        });
    }
</script>

Answer 3

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

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

Answer 4

这个方法有用吗

xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("more-info").innerHTML=xmlhttp.responseText;
                if(str=="one") { 
                document.getElementById("one").style.display="block";
                document.getElementById("two").style.display="none";
                document.getElementById("three").style.display="none";
}
                if(str=="two") { 
 document.getElementById("one").style.display="none";
                document.getElementById("two").style.display="block";
                document.getElementById("three").style.display="none";
}
                if(str=="three") {
 document.getElementById("one").style.display="none";
                document.getElementById("two").style.display="none";
                document.getElementById("three").style.display="block";
 }
            }
        }