Question

当我点击链接＃S1时，会出现一个模式，上面有一个列表。然后，我单击列表中的一个项目，将各种信息发送到页面。它工作得很好。但是，当我再次点击＃S1链接时，没有任何反应。我做错了什么？

这是html代码

<div class="slot" id="slot1">
    <div class="image">
        <a href="#"><span class="circled" id="S1"></span></a>
    </div>
    <div class="text">
    </div>
</div>

这是onclick fonction

$('#S1').click(function(){
    openModal();
    modalContent(1);
    showList(1)
    return false;
});

这是openModal函数

function openModal() {
    el = document.getElementById("modal");
    el.style.visibility = "visible";
}

这是modalContent函数

function modalContent(id) {
    switch(id) {
        case 1:
            $("#modal").load("modal.php");
            break;
    } 
}

这是showList函数

function showList(id) {
    if (id=="") {
        document.getElementById("list").innerHTML="";
        return;
    }
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    } 
    else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("list").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","list.php?slot="+id,true);
    xmlhttp.send();
}

这是list.php代码

$slot = intval($_GET['slot']);
if($slot == 1){
    $result = $db->query("SELECT * FROM item ORDER BY level DESC");
    $result->setFetchMode(PDO::FETCH_OBJ);

    echo '<table class="tableau">';

    while($row = $result->fetch()){
        echo '<tr onclick="itemInfo('.$row->id.')">';
            echo '<td width="10%">'.$row->level.'</td>';
            echo '<td width="90%">'.$row->name.'</td>';
        echo '</tr>';
    }

    echo '</table>';
}

这是itemInfo函数

function itemInfo(id) {
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    } 
    else {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById('slot1').innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","itemChoice.php?item="+id,true);
    xmlhttp.send();
    document.getElementById('modal').innerHTML = '';
    document.getElementById('modal').style.visibility = "hidden";
}

提前谢谢

Answer 1

我首先注意到showList(1)函数中的click之后没有分号。您是否在浏览器中检查了错误控制台，看是否由于JS错误而导致点击无效？

但是，我注意到你用jquery标记了这一点，但你几乎没有使用它。这是你用jQuery重构的javascript代码：

<script>
$(function() {
    $('#S1').click(function(){
        openModal();
        modalContent(1);
        showList(1);
        return false;
    });
});

function openModal() {
    $("#modal").show();
}

function modalContent(id) {
    switch(id) {
        case 1:
            $("#modal").load("modal.php");
            break;
    } 
}

function itemInfo(id) {
    $.get("itemChoice.php?item="+id, function(data) {
        $("#slot1").html(data);
    });
    $("#modal").hide().html("");
}

function showList(id) {
    $.get("list.php?slot="+id, function(data) {
        $("#list").html( data );
    });
}
</script>

哦，是的，除非有特定原因要使用visibility样式，请不要管它，并使用display: none;和display: block;。 jQuery show()和hide()函数使用display而非visibility。

在做出选择后，div无法点击

1 个答案: