如何在jQuery切换功能中添加“x”按钮？

时间：2014-10-15 17:19:01

标签： javascript jquery html css

您好我是jQuery的新手，我想在代码中添加一些内容。

我或多或少想要的东西（在网上找到）：http://jsfiddle.net/EMYFt/5/

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

在此先感谢，非常感谢！

以下是我的代码（JSFiddle mirror）：

我想在我正在切换的station_info_ DIV中添加一个（x）按钮。另外，如何在桌面_DIV顶部制作那个DIV叠加（看看我的小提琴：当你点击84时它会低于100。

$(document).ready(function() {
  $(".desk_box").click(function() {
    var id = $(this).attr("data")
    $("#station_info_"+id).toggle();
  });
});
#map_size{
  position:center;
  width:1190px;
  height:1300px;
  background:#0099FF;
  border-style: solid;
  border-color: black;
  position: relative;
}
/* desk boxes*/
.desk_box{ 
  width: 23px;
  height: 10px;
  border: 4px solid black; 
  padding:10px;
}	

/*station info*/	
.station_info_ {
  display: none;
  width:150px;
  height:150px;
  margin-left:20px;
  border:4px solid black;
  background-color:white;
  position:relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="map_size">
  <div class="desk_box" data="84" style="position:absolute;left:20px;top:80px;">id:84</div>

  <div class="station_info_" id="station_info_84" style="position:absolute;left:50px;top:90px;">
    <p>Hello the id is:84</p>
    <p>Section: H</p>
  </div>

  <div class="desk_box" data="90" style="position:absolute;left:20px;top:120px;">id:90</div>

  <div class="station_info_" id="station_info_90" style="position:absolute;left:50px;top:90px;">
    <p>Hello the id is:90</p>
    <p>Section: H</p>
  </div>
  <div class="desk_box" data="100" style="position:absolute;left:120px;top:120px;">id:100</div>
  <div class="station_info_" id="station_info_100" style="position:absolute;left:50px;top:90px;">
    <p>Hello the id is:100</p>
    <p>Section: H</p>
  </div>
</div>

4 个答案:

答案 0 :(得分：1)

要回答关于进入的问题，您需要设置z-index 

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

并添加X

＆＃13;
＆＃13; 
$(document).ready(function() {
   $(".desk_box").click(function() {
    var id = $(this).attr("data")
      var st = $("#station_info_"+id).toggle();
       if (!st.has(".close").length) {
            st.prepend('<button class="close">X</button>');
       }
   });//end click
});//end ready

$(document).on("click",".close", function () {
   $(this).parent().toggle(); 
});
＆＃13; 
#map_size{
	position:center;
	width:1190px;
	height:1300px;
	background:#0099FF;
	border-style: solid;
	border-color: black;
	position: relative;
	}
/* desk boxes*/
.desk_box{ 
	width: 23px;
	height: 10px;
	border: 4px solid black; 
	padding:10px;
}	

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

button.close {
    position: absolute; top:0px; right:0px;   
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="map_size">
<div class="desk_box" data="84" style="position:absolute;left:20px;top:80px;">id:84</div>

<div class="station_info_" id="station_info_84" style="position:absolute;left:50px;top:90px;"><p>Hello the id is:84</p><p>Section: H</p></div>

<div class="desk_box" data="90" style="position:absolute;left:20px;top:120px;">id:90</div>

<div class="station_info_" id="station_info_90" style="position:absolute;left:50px;top:90px;"><p>Hello the id is:90</p><p>Section: H</p></div>

<div class="desk_box" data="100" style="position:absolute;left:120px;top:120px;">id:100</div>

<div class="station_info_" id="station_info_100" style="position:absolute;left:50px;top:90px;"><p>Hello the id is:100</p><p>Section: H</p></div>
    
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

＆＃13;
＆＃13; 
//Display station information in a hidden DIV that is toggled with a closing (X) button
$(document).ready(function() {
  $(".desk_box").click(function() {
    var id = $(this).attr("data")
    $("#station_info_" + id).toggle();
  }); //end click

  $(".close").click(function() {
    $("#station_info_" + $(this).data("id")).hide();
  });
}); //end ready
＆＃13; 
#map_size {
  position: center;
  width: 1190px;
  height: 1300px;
  background: #0099FF;
  border-style: solid;
  border-color: black;
  position: relative;
}
/* desk boxes*/

.desk_box {
  width: 23px;
  height: 10px;
  border: 4px solid black;
  padding: 10px;
}
/*station info*/

.station_info_ {
  display: none;
  width: 150px;
  height: 150px;
  margin-left: 20px;
  border: 4px solid black;
  background-color: white;
  position: relative;
  z-index: 1;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="map_size">
  <div class="desk_box" data="84" style="position:absolute;left:20px;top:80px;">id:84</div>

  <div class="station_info_" id="station_info_84" style="position:absolute;left:50px;top:90px;">
    <span data-id="84" class="close" style="float:right;">x</span>
    <p>Hello the id is:84</p>
    <p>Section: H</p>
  </div>

  <div class="desk_box" data="90" style="position:absolute;left:20px;top:120px;">id:90</div>

  <div class="station_info_" id="station_info_90" style="position:absolute;left:50px;top:90px;">
    <span data-id="90" class="close" style="float:right;">x</span>
    <p>Hello the id is:90</p>
    <p>Section: H</p>
  </div>

  <div class="desk_box" data="100" style="position:absolute;left:120px;top:120px;">id:100</div>

  <div class="station_info_" id="station_info_100" style="position:absolute;left:50px;top:90px;">
    <span data-id="100" class="close" style="float:right;">x</span>
    <p>Hello the id is:100</p>
    <p>Section: H</p>
  </div>

</div>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

向station_info_类添加关闭按钮或范围，如

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

添加一个监听器以关闭该框，如：

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

请参阅Fiddle

我还在结束X

中添加了一些css

CSS：

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

.close:hover{
    cursor: pointer;
}

最后更改station_info_类的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;
}

答案 3 :(得分：1)

添加到史蒂夫Webb的代码中，我还解决了z-index问题，并确保我们只在通过更改＆＃34;切换＆＃34;来点击x时隐藏。到＆＃34;显示＆＃34;

http://jsfiddle.net/ongv8h9e/8/ 

//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
相关问题
最新问题