Question

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

HTML code：

<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应该是唯一的，在您的情况下，它会重复多个元素，因此仅针对具有此ID listing的DOM中的第一个项触发click事件处理程序。

因此，请使用类选择器。

另外，要提取您需要在单击的项目中遍历的当前单击列表项目的id_align值，您可以针对当前项目调用.find()，否则它将始终为您提供第一个{{1} } field value always。

HTML代码：

.id_align()

JS代码：

 <div class="listing">

Answer 2

在迭代中，您要添加具有相同ID的项目，因此它会在第一个项目上停止。使用课程listing代替listing：

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

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

Answer 3

我猜测错误是你在列表中循环创建动态的N div并为它们分配相同的id。请记住HTML中的元素ID大多数是文档范围内的唯一（您可以阅读规范here）

所以，要解决这个问题，你可能会以这样的方式结束：

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

                <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 %}

和你的javascript代码

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

使列表可点击（jquery / html）

3 个答案: