javascript - 使列表可点击(jquery/html)

Question

我在我的网站上使用 python flask 来显示数据库中的内容，并且我试图让每个列表项都可以点击。我在 stackoverflow 上查看了关于如何使列表项可点击的各种问题，我可以这样做，但只有此列表中的第一个列表项是可点击的，其余的什么都不做。有人可以告诉我我做错了什么吗？这是我第一次做 html/js/jquery 的东西，所以我很困惑。

HTML代码:

<ul id="listing-list">
    {% for listing in listings %} <!-- For loop puts all results in the columns-->
        <li>
            <div id="listing">

                <input type="hidden" class="id_align" name="id_align" value="{{ listing.id }}">

                <div id="name-address">
                    <div id="listing-name">{{ listing.listing_name }}</div>
                    <div id="listing-address">{{ listing.address }}</div>

                    <div id="room-bath">
                        <span id="listing-rooms">{{ listing.rooms }} bed</span>
                        &nbsp;&nbsp;&middot;&nbsp;&nbsp;
                        <span id="listing-bath">{{ listing.bathrooms }} bath</span>
                    </div>

                    <div id="listing-comments"><br>Comments: {{ listing.comments }}</div>
                </div>
                <div id="listing-price">${{ listing.price }}</div>
            </div>
        </li>
    {% endfor %}
</ul>

JQuery 代码:

$( "#listing" ).click(function() {
    var list_id = $( ".id_align" ).val();
    //alert(list_id);
    var location = "/create_review/" + list_id;
    //alert('' + location);
    window.location.href = location;
});

Answer 1

ID 应该是唯一的，在您的情况下，它对多个元素重复，因此仅针对 DOM 中具有此 ID listing 的第一个项目触发点击事件处理程序。

所以，改用类选择器。

还要提取当前单击的列表项的 id_align 值，您需要在单击的项目中遍历，您可以针对当前项目调用 .find() ，否则它将始终为您提供始终是第一个 .id_align() 字段值。

HTML 代码:

 <div class="listing">

JS代码:

$( ".listing" ).click(function() {
   var list_id = $(this).find(".id_align" ).val(); // to fetch current current id_align
   var location = "/create_review/" + list_id;
  window.location.href = location;
});