javascript - 如何显示带有被单击元素位置的警报？

Question

我有这个例子:

link

代码 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元素列表。

你能告诉我如何解决这个问题以及为什么我的代码不起作用吗？

提前致谢!

Answer 1

$("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>