如何显示带有被单击元素位置的警告?

How can I display an alert with the position of the element that was clicked?

本文关键字：元素 单击 位置 警告 何显示 显示      更新时间：2023-09-26

我有这样一个例子:

链接

HTML代码:

<ul>
    <li id="#bar">
        <img src="http://theimageconference.org/wp-content/uploads/2014/01/images-50x50.png"width=50 height=50></img>
        <p>ELEMENT 1</p>
    </li>
    <li id="#bar">
        <img src="http://whyfiles.org/wp-content/uploads/2013/04/promega_logo.png" width=50 height=50></img>
        <p>ELEMENT 2</p>
    </li>
    <li id="#bar">
        <img src="http://bikechicago.com/wp-content/uploads/bikechicago-uber-image-C2.png" width=50 height=50></img>
        <p>ELEMENT 3</p>
    </li>
    <li id="#bar">
        <img src="http://coordinate.com.au/wp-content/uploads/2014/06/CBR_Web_Images.jpg" width=50 height=50></img>
        <p>ELEMENT 4</p>
    </li>
    <li id="#bar">
        <img src="http://www.bpifrance-lelab.fr/var/bpi/storage/images/media/images/image-couverture/34625-1-fre-FR/image-couverture_large.jpg" width=50 height=50></img>
        <p>ELEMENT 5</p>
    </li>
    <li id="#bar">
        <img src="http://odpiralnicasi.com/photos/012/539/image-big.jpg" width=50 height=50></img>
        <p>ELEMENT 6</p>
    </li>
</ul>
<div class="dreapta">
</div>

CSS代码:

ul{
    list-style-type:none;
    width:95px;
    float:left;
}
ul li{border-bottom:1px solid;}
p{padding;0;margin:0;}
.dreapta{float:right;width:100px;height:100px;border:1px solid;}

JS代码:

$("ul li").click( function(event)
{
    var barIndex = $( "ul li" ).index();
    alert("Element poistion:"barIndex);
});

基本上我想显示一个警告位置dln元素列表，你点击。

你能告诉我如何解决这个问题，为什么我的代码不工作?

提前感谢!

$("ul li").click(function (event) {
    var barIndex = $("ul li").index($(this)) + 1;
    alert("Element poistion:" + barIndex);
});
ul {
    list-style-type:none;
    width:95px;
    float:left;
}
ul li {
    border-bottom:1px solid;
}
p {
    padding;
    0;
    margin:0;
}
.dreapta {
    float:right;
    width:100px;
    height:100px;
    border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<ul>
    <li id="#bar">
        <img src="http://theimageconference.org/wp-content/uploads/2014/01/images-50x50.png" width=50 height=50></img>
        <p>ELEMENT 1</p>
    </li>
    <li id="#bar">
        <img src="http://whyfiles.org/wp-content/uploads/2013/04/promega_logo.png" width=50 height=50></img>
        <p>ELEMENT 2</p>
    </li>
    <li id="#bar">
        <img src="http://bikechicago.com/wp-content/uploads/bikechicago-uber-image-C2.png" width=50 height=50></img>
        <p>ELEMENT 3</p>
    </li>
    <li id="#bar">
        <img src="http://coordinate.com.au/wp-content/uploads/2014/06/CBR_Web_Images.jpg" width=50 height=50></img>
        <p>ELEMENT 4</p>
    </li>
    <li id="#bar">
        <img src="http://www.bpifrance-lelab.fr/var/bpi/storage/images/media/images/image-couverture/34625-1-fre-FR/image-couverture_large.jpg" width=50 height=50></img>
        <p>ELEMENT 5</p>
    </li>
    <li id="#bar">
        <img src="http://odpiralnicasi.com/photos/012/539/image-big.jpg" width=50 height=50></img>
        <p>ELEMENT 6</p>
    </li>
</ul>
<div class="dreapta"></div>

相关文章：