- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当我单击链接 #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 函数
$('#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";
}
提前谢谢
最佳答案
我首先注意到在 click
函数中的 showList(1)
后面没有分号。您是否检查过浏览器中的错误控制台,看看是否由于 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
。
关于javascript - 做出选择后 div 不可点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25042411/
我创建了一个库项目,然后构建它,获取 .aar 并解压缩它。获取包含库的 classes.jar 文件,并将其添加到另一个项目中。该项目识别我的文件,我可以从中调用方法和函数。我的问题是我尝试从我的库
这不是现实世界的问题,我只是想了解如何创建 promise 。 我需要了解如何为不返回任何内容的函数做出 promise ,例如 setTimeout。 假设我有: function async(ca
我是 Promise 的新手。我写了两个例子: 第一个是: new RSVP.Promise(function (resolve, reject) { setTimeout(function
我有一个 nodejs (express) 作为服务器端,一个 angular 6 作为客户端。在服务器中我有中间件功能,可以进行 session 检查。如果 session 无效或不存在,我想向客户
我有一个 nodejs (express) 作为服务器端,一个 angular 6 作为客户端。在服务器中我有中间件功能,可以进行 session 检查。如果 session 无效或不存在,我想向客户
我有四个 I/O 操作:A、B、C 和 D。它们中的每一个都应该使用 vertx.executeBlocking 来执行。我应该有以下行为: //PSEUDOCODE waitForExecuteBl
我是一名优秀的程序员,十分优秀!