Question

在django项目中，我试图创建一个表格，当用户单击该表格时单元格会变成红色。

这是我的模板：

<table id="this_week" width=88%>
    <tr id = "days">
        <th><p>Horaire</p></th>
        <th><p>lun.</p></th>
        <th><p>Mar.</p></th>
        <th><p>Mer.</p></th>
        <th><p>Jeu.</p></th>
        <th><p>Ven.</p></th>
        <th><p>Sam.</p></th>
        <th><p>Dim.</p></th>
    </tr>
    {% with hours="9h 9h30 10h 10h30 11h 11h30 12h 12h30 13h 13h30 14h 14h30 15h 15h30 16h 16h30 17h 17h30 18h 18h30 19h 19h30 20h 20h30 21h" %}
    {% for i in hours.split %}
        <tr id= "{{ i }}">
            <th><p>{{ i }}</p></th>
            <th id="{{ i }} lun" class="available" onclick='deliveryBooking()'></th>
            <th id="{{ i }} mar" class="available" onclick='deliveryBooking()'></th>
            <th id="{{ i }} mer" class="available" onclick='deliveryBooking()'></th>
            <th id="{{ i }} jeu" class="available" onclick='deliveryBooking()'></th>
            <th id="{{ i }} ven" class="available" onclick='deliveryBooking()'></th>
            <th id="{{ i }} sam" class="available" onclick='deliveryBooking()'></th>
            <th id="{{ i }} dim" class="available" onclick='deliveryBooking()'></th>
        </tr>
    {% endfor %}
    {% endwith %}
</table>
<script>
function deliveryBooking()
{
    if ($(this).hasClass('available')) {
        $(this).removeClass('available');
        $(this).addClass('unavailable');
        console.log($(this));
    };
};
</script>

但是该脚本不执行任何操作，即使在控制台日志中也没有任何显示。然后，我尝试删除单元格上的“ onclick”属性，并使用此代码导入了一个js文件（我一次又一次尝试了以下功能），但没有更多结果：

$(document).ready(function() {

$("#this_week").children().find('.available').click(function(event){
    $(event.target).removeClass("available").addClass("unavailable");
    console.log($(event.target));
});

$("#this_week").children().find('.available').click(function(){
    $(this).removeClass("available").addClass("unavailable");
    console.log($(this));
});

});

我还尝试删除了“ children（）”部分和其他一些小的更改，但是我不知道下一步该怎么做。关于我在做什么错的任何想法吗？

Answer 1

这是最简单的方法

我要做的就是删除onclick并添加

$(".available").on("click",function() { 
  $(this).toggleClass("available unavailable"); 
});

表的创建无关紧要，我在这里纯粹使用jQuery来创建示例的单元格

$.each("9h 9h30 10h 10h30 11h 11h30 12h 12h30 13h 13h30 14h 14h30 15h 15h30 16h 16h30 17h 17h30 18h 18h30 19h 19h30 20h 20h30 21h".split(" "),function(i,hour) {

        $("#hours").append(`<tr><th><p>${hour}</p></th>
            <th id="${i}lun" class="available"></th>
            <th id="${i}mar" class="available"></th>
            <th id="${i}mer" class="available"></th>
            <th id="${i}jeu" class="available"></th>
            <th id="${i}ven" class="available"></th>
            <th id="${i}sam" class="available"></th>
            <th id="${i}dim" class="available"></th></tr>`);
})
$(".available").on("click",function() { 
  $(this).toggleClass("available unavailable"); 
});

.available { background-color:green }
.unavailable { background-color:red }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="this_week" width=88%>
    <tr id="days">
        <th><p>Horaire</p></th>
        <th><p>Lun.</p></th>
        <th><p>Mar.</p></th>
        <th><p>Mer.</p></th>
        <th><p>Jeu.</p></th>
        <th><p>Ven.</p></th>
        <th><p>Sam.</p></th>
        <th><p>Dim.</p></th>
    </tr>
    <tbody id="hours"></tbody>
</table>

Answer 2

您需要在this函数中传递onclick，因为默认this指向window对象。

HTML

<th id="{{ i }} dim" class="available" onclick='deliveryBooking(this)'></th>

Js

<script>
function deliveryBooking(element)
{
    if ($(element).hasClass('available')) {
        $(element).removeClass('available');
        $(element).addClass('unavailable');
        console.log($(element));
    };
};
</script>

Answer 3

删除onclick=deliveryBooking()，然后使用此代码。

$('#this_week').on('click', '.available, .unavailable', function(){
    $(this).toggleClass('available unavailable')
})

此代码使用event delegation。如果您需要了解更多信息，请阅读jQuery API。 .on / .toggleClass

在不相关的注释上，我认为您的标记可能是错误的。 <th>用于表头，而<td>用于包含实际数据的单元格。我认为您的<th>循环中的所有for除了第一个循环外，都需要更改为<td>。

jQuery：难以选择被点击的HTML元素

3 个答案: