Javascript 我怎样才能加上一句；x"；jQuery切换函数中的按钮？

您好，我是jQuery新手，我想在代码中添加一些东西

我或多或少想要什么（在网上找到）：

我在PHP中有一个循环来创建所有这些div（在它们的x，y坐标处），这就是为什么我需要添加一个按钮。我希望每个桌面盒分区在单击时保持打开状态，直到用户决定单击X。现在，只有当用户单击同一分区时，我才让它工作。这很烦人，因为它最终会隐藏其他分区，我必须刷新页面。因此，添加（x）按钮会有所帮助

提前感谢，非常感谢

下面是我的代码（）：

我想在正在切换的station\u info\uDiv中添加一个（x）按钮。另外，我如何使该DIV覆盖在桌面盒DIV的顶部（看我的小提琴：当你点击84时，它将低于100）

$（文档）.ready（函数（）{
$（“.desk_box”）。单击（函数（）{
var id=$（this.attr（“数据”）
$（“#站点信息”+id）.toggle（）；
});
})；

#地图大小{
位置：中心；
宽度：1190px；
高度：1300px；
背景#0099FF；
边框样式：实心；
边框颜色：黑色；
位置：相对位置；
}
/*书桌盒*/
.desk_box{
宽度：23px；
高度：10px；
边框：4倍纯黑；
填充：10px；
}	
/*车站信息*/
.电台信息{
显示：无；
宽度：150px；
高度：150像素；
左边距：20px；
边框：4倍纯黑；
背景色：白色；
位置：相对位置；
}

身份证号码：84
你好，id是：84

章节：H

身份证号码：90
你好，身份证号码是：90

章节：H

身份证号码：100
你好，身份证号码是：100

章节：H

要回答有关进入的问题，您需要设置z索引

.station_info_ { 
    z-index:10;
    ....

并添加一个X

$（文档）.ready（函数（）{
$（“.desk_box”）。单击（函数（）{
var id=$（this.attr（“数据”）
var st=$（“#站点信息”+id）.toggle（）；
如果（！st.has（“.close”）.长度）{
圣普雷潘德（“X”）；
}
})；//结束单击
})//结束准备就绪
$（文档）。在（“单击”、“.close”上，函数（）{
$（this.parent（）.toggle（）；
})；

#地图大小{
位置：中心；
宽度：1190px；
高度：1300px；
背景#0099FF；
边框样式：实心；
边框颜色：黑色；
位置：相对位置；
}
/*书桌盒*/
.desk_box{
宽度：23px；
高度：10px；
边框：4倍纯黑；
填充：10px；
}	
/*车站信息*/
.电台信息{
显示：无；
宽度：150px；
高度：150像素；
左边距：20px；
边框：4倍纯黑；
背景色：白色；
位置：相对位置；
z指数：10；
}
按钮，关闭{
位置：绝对；顶部：0px；右侧：0px；
}

身份证号码：84
您好，id是：84

身份证号码：90
您好，id是：90

身份证号码：100
您好，id是：100

//在隐藏的DIV中显示电台信息，该DIV通过关闭（X）按钮切换
$（文档）.ready（函数（）{
$（“.desk_box”）。单击（函数（）{
var id=$（this.attr（“数据”）
$（“#站点信息”+id）.toggle（）；
})；//结束单击
$（“.close”）。单击（函数（）{
$（“#station_info”+$（this.data（“id”））.hide（）；
});
})；//结束就绪

#地图大小{
位置：中心；
宽度：1190px；
高度：1300px；
背景#0099FF；
边框样式：实心；
边框颜色：黑色；
位置：相对位置；
}
/*书桌盒*/
.办公桌{
宽度：23px；
高度：10px；
边框：4倍纯黑；
填充：10px；
}
/*站点信息*/
.电台信息{
显示：无；
宽度：150px；
高度：150像素；
左边距：20px；
边框：4倍纯黑；
背景色：白色；
位置：相对位置；
z指数：1；
}

身份证号码：84
x
你好，id是：84

章节：H

身份证号码：90
x
你好，身份证号码是：90

章节：H

身份证号码：100
x
你好，身份证号码是：100

章节：H

添加一个关闭按钮或span到

站点信息

类

<span class="close">x</span>

看

我还向结束X添加了一些css

CSS:

最后更改station_info_uu类的

z-index

，如下所示：

.station_info_ {
    position: relative;
    display: none;
    width:150px;
    height:150px;
    margin-left:20px;
    border:4px solid black;
    background-color:white;
    position:relative;
    z-index: 100;
}

---

除了steve Webb的代码之外，我还解决了z索引问题，并通过将“切换”更改为“显示”，确保只在单击x时隐藏

---

你试过这个X函数吗？因为我在你的代码中看不到任何可以让它工作的东西。而且这就像你第四次发布关于这个“projet”的问题一样在几天内…下面已经给出了4个可能的答案，这是因为这个网站上的好人愿意帮助像我这样的人学习一门新的语言。如果你说你“4次”看到同样的问题（这不是完全相同的问题）那为什么不帮忙呢？我是问你是否尝试过有关问题/搜索的任何方法。我从来没有说过人们不应该帮助你。非常棒的作品非常感谢你的帮助！我将你的答案与其他答案结合起来，因为它们都很好！非常棒的作品非常感谢你的帮助！我将你的答案与其他答案结合起来，因为它们都很好！

.close{
    position: absolute;
    top: 10px;
    right: 10px;    
}

.close:hover{
    cursor: pointer;
}

.station_info_ {
    position: relative;
    display: none;
    width:150px;
    height:150px;
    margin-left:20px;
    border:4px solid black;
    background-color:white;
    position:relative;
    z-index: 100;
}

//Display station information in a hidden DIV that is toggled with a closing (X) button
$(document).ready(function() {
  var zmax=1;
  $(".desk_box").click(function() {
    var id = $(this).attr("data");
    $("#station_info_"+id).show().css("z-index",zmax++);
   });//end click

  $('.close').click(function(){
    $(this).parent().toggle();
  });
});//end ready