cari

Rumah  >  Soal Jawab  >  teks badan

javascript - 我需要在tools-rows绑定事件，输出单击的元素的ID，为什么有的时候是空的了

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Title</title>
<style>
    /***-------------------------mapTools bar -------------------***/
    .mapToolbar {
        width:auto;
        height: 35px;
        position: absolute;
        right: 5px;
        top: 10px;
        z-index:99;
    }

    .mapToolbar p{
        font-size:12px;
        color:#333333;
        font-family:"microsoft yahei";
        transition:all 0.3s ease-in 0s;
        -webkit-transition:all 0.3s ease-in 0s;
        -moz-transition:all 0.3s ease-in 0s;
        -ms-transition: all 0.3s ease-in 0s;
        box-shadow: 5px 5px 5px #ccc;
    }

    i{
        font-style:normal;
    }
    .mapToolbar b{
        border-right:1px solid #eee;
        height:20px;
        top:8px;
        position:relative;
        float:left;
    }
    .tools-rows{
        width:80px;
        height:34px;
        position:relative;
        line-height:34px;
        cursor:pointer;
        float:left;
        text-align:center;
        background-color: #fff;
    }
    .tools-rows-fold{
        width:20px;
        height:34px;
        position:relative;
        line-height:34px;
        cursor:pointer;
        float:left;
        background-color:#6484d9;
    }
    .tools-rows:hover{
        height:auto;
    }
    .tools-rows:hover{
        color:#519DDE;
    }
    .tools-rows span,i,em{
        display:inline-block;
        vertical-align:middle;

    }
    .tools-text{
        font-style:normal;
        vertical-align:middle;
    }

</style>
<script src="jquery-2.1.4.js"></script>

</head>
<body>
<p class="mapToolbar" id="mapToolbar">

<p class="tools-rows-fold" id="fold">
    <span class="fold"></span>
</p>
<b></b>
<p class="tools-rows" id="zoom_in" >
    <span class="glyphicon glyphicon-zoom-in"></span><i class="tools-text">放大</i><em></em>
</p>
<b></b>
<p class="tools-rows" id="zoom_out" >
    <span class="glyphicon glyphicon-zoom-out"></span><i class="tools-text">缩小</i><em></em>
</p>
<b></b>
<p class="tools-rows" id="zoom_prev" >
    <span class="glyphicon glyphicon-arrow-left"></span><i class="tools-text">向前</i><em></em>
</p>
<b></b>
<p class="tools-rows" id="zoom_next" >
    <span class="glyphicon glyphicon-arrow-right"></span><i class="tools-text">向后</i><em></em>
</p>
<b></b>
<p class="tools-rows" id="pan" >
    <span class="glyphicon glyphicon-hand-up"></span><i class="tools-text">漫游</i><em></em>
</p>
<b></b>
<p class="tools-rows" id="clear" >
    <span class="glyphicon glyphicon-trash"></span><i class="tools-text">清除</i><em></em>
</p>
<b></b>
<p class="tools-rows" id="extent" >
    <span class="glyphicon glyphicon-globe"></span><i class="tools-text">全图</i><em></em>
</p>

</p>
</body>
</html>
<script>

$(".tools-rows").on("click",function(evt){
    var value=evt.target.id;
    alert(value);
});

</script>

大家讲道理大家讲道理2803 hari yang lalu568

membalas semua(1)saya akan balas

  • 巴扎黑

    巴扎黑2017-04-11 13:09:35

    event.target指向触发点击事件的底层元素。。你这里实际点中的p下面的span下面的i元素，所以不会有id属性

    改成

    var value = $(this).attr('id');

    event.target最好在没有子标签嵌套的时候使用

    balas
    0
  • Batalbalas