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。但是当我点击div类booknoHolder时，我还想隐藏/删除div类bookProp。我尝试了几个jQuery代码，但没有任何工作。要提到div类bookProp实际上是由PHP while循环生成的，因此条目数将是动态的。

Answer 1

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

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

如果您想在点击booknoHolder时隐藏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";
 }
            }
        }

在其他div上动态隐藏div

4 个答案: