如何使数组中的每个列表项都可点击？答案

【问题标题】：How do I make each of the list items in an array clickable?如何使数组中的每个列表项都可点击？
【发布时间】：2014-12-28 06:18:22
【问题描述】：

我有一个不同城市的列表，我必须按离我最近的位置对其进行排序。

这里是小提琴：http://jsfiddle.net/t24g3umj/

var jsonString ='{"City A":{"Position":{"Longitude":9.96233,"Latitude":49.80404}},"City B":{"Position":{"Longitude":6.11499,"Latitude":50.76891}},"City C":{"Position":{"Longitude":6.80592,"Latitude":51.53548}},"City D":{"Position":{"Longitude":9.50523,"Latitude":51.31991}},"City E":{"Position":{"Longitude":9.66089,"Latitude":48.70158}},"City F":{"Position":{"Longitude":9.93368,"Latitude":53.55608}},"City G":{"Position":{"Longitude":11.56122,"Latitude":48.14496}},"City H":{"Position":{"Longitude":13.34253,"Latitude":52.5319}},"City I":{"Position":{"Longitude":6.11327,"Latitude":50.77715}},"City J":{"Position":{"Longitude":13.36671,"Latitude":52.54344}}}';

var myData = JSON.parse(jsonString);

$(document).ready(function () {

var distanceObj = [],
    i = 0;
$.each(myData, function (a, b) {
    distanceObj[i] = {
        distance: hesapla(9.9608999, 49.7222842, b.Position.Longitude, b.Position.Latitude),
        location: a
    };
    ++i;
});

distanceObj.sort(function (a, b) {
    return parseInt(a.distance) - parseInt(b.distance)
});

$.each(distanceObj, function (a, b) {
    $('#groups').append('<li>' + b.location + ': ' + b.distance + 'm</li>');
});

console.log(distanceObj);

function hesapla(meineLongitude, meineLatitude, long1, lat1) {
    erdRadius = 6371;

    meineLongitude = meineLongitude * (Math.PI / 180);
    meineLatitude = meineLatitude * (Math.PI / 180);
    long1 = long1 * (Math.PI / 180);
    lat1 = lat1 * (Math.PI / 180);

    x0 = meineLongitude * erdRadius * Math.cos(meineLatitude);
    y0 = meineLatitude * erdRadius;

    x1 = long1 * erdRadius * Math.cos(lat1);
    y1 = lat1 * erdRadius;

    dx = x0 - x1;
    dy = y0 - y1;

    d = Math.sqrt((dx * dx) + (dy * dy));


    return Math.round(d * 1000);
};
});

我想知道，如何让每个 li 元素都可以点击？

另外，第二个问题是如何将特殊城市过滤到列表顶部而不考虑距离？

在此先感谢 stackoverflow 的精彩社区。p>

【问题讨论】：

标签： javascript jquery html css json

【解决方案1】：

您还可以使用on 在处理程序上使用委托事件绑定，前提是您正在动态添加 li：

$(document).ready(function () {
    $('#groups').on('click', 'li', function() {
       // handler here
    }

您可以使用 jQuery .prepend() 将 li 添加到列表顶部，而不是 append() 将其添加到底部

$('#groups').prepend('<li>I am special ...</li>');

【讨论】：

我仍然不能 100% 确定如何使用代码的第一部分。如何让每个 li 链接到不同的页面？
创建 Li 元素时，将构建链接所需的任何数据嵌入 data- 属性中，然后您可以在处理程序中使用这些数据。

【解决方案2】：

要使元素可点击，您需要在每个 li 中使用"<a>" 标签。下面是修改后的代码。

$.each(distanceObj, function(a, b) {
    $('#groups').append('<li><a href="#">' + b.location + ': ' + b.distance + 'm </a></li>');
});

http://jsfiddle.net/t24g3umj/1/

【讨论】：

我不敢相信我没有想到这一点，但这会使所有 li 元素都指向同一个链接。我应该更具体一些，因为我试图让每个 li 元素链接到不同的页面。

【解决方案3】：

这是你想要的吗？

$.each(distanceObj, function(a, b) {
    $('#groups').append('<li><a href="#">' + b.location + ': ' + b.distance + 'm </a></li>');
});

【讨论】：

我不敢相信我没有想到这一点，但这会使所有 li 元素都指向同一个链接。我应该更具体一些，因为我试图让每个 li 元素链接到不同的页面。