Question

我试图显示一个表，您可以在所选的tr中单击。每次我在这个tr中单击时，突出显示都会激活，因为我使用了toggleClass函数。我试图找到一种方法让用户点击＆＃34;已经＆＃34;没有进行切换的高级课程。

$(document).ready(function(){
    $("tr:not(:first)").click(function() {
        $(this).closest("tr").siblings().removeClass("highlighted");
        $(this).toggleClass("highlighted");
    });
});

更新

https://jsfiddle.net/vakcrthL/1/

每次用户需要复制副本时，toggleClass都会将其隐藏在页面中。

Answer 1

使用它：

$("tr:not(:first)").click(function() {
    $(this).addClass("highlighted").siblings().removeClass("highlighted");
});

因为您点击tr本身，所以您不需要使用.closest()方法 $(this)实际上是您当前点击的tr < / strong>即可。并且您可以在当前单击的addClass()上使用tr，并从点击的-inline-threshold的兄弟姐妹中删除该类。

Answer 2

您可以在e.stopPropagation();和.qtyplus .qtyminus个事件处理程序中添加click，以防止调用tr点击事件处理程序。

e.preventDefault();和e.stopPropagation();可以在处理程序结束时替换为return false;。

一个处理程序的示例（未与事件传播连接的代码保持不变）：

$('.qtyplus').click(function() {
    fieldName = $(this).attr('field');
    var currentVal = parseInt($('input[name='+fieldName+']').val());
    if (!isNaN(currentVal)) {
        $('input[name=' + fieldName+']').val(currentVal + 1);
    } else {
        $('input[name=' + fieldName+']').val(0);
    }
    return false;
});

Full fiddle example

由于点击<input>的值仍会隐藏该行，因此也可以防止隐藏在其点击上：

$(".qty").on("click", false);

Full fiddle example

Answer 3

$(document).ready(function(){
    $("tr:not(:first)").click(function() {
        $(this).siblings().removeClass("highlighted");
        $(this).toggleClass("highlighted");
    });
});

Answer 4

你可以通过jQuery中的event.stopPropagation（）通过父元素传播click事件。

$(document).ready(function(){
    $("tr:not(:first)").click(function() {
        $(this).closest("tr").siblings().removeClass("highlighted");
        $(this).toggleClass("highlighted");
    });
    $("tr:not(:first)").children().click(function(event) {
           event.stopPropagation();                
           //the rest of your click
    })
});

单击表格中的函数toggleClass

4 个答案: