Question

如果锚标记的文本（表格外）具有特定值，我需要表格行才能具有onclick功能。 tr onclick不适用于条件集。我怎样才能做到这一点？

$(document).ready(function(){
    var enabled = ($('a#action-toggle').text() == 'Enabled');
    $('tr[id^=mytablerow-]').each(function(){
        if (enabled) {            
            $(this).on('click', function(){
                alert('action enabled'); 
            });
        }
    });
    $('a#action-toggle').on('click', function(ev){
        ev.preventDefault();
        if($(this).text() == 'Disabled') $(this).text('Enabled');
        else if($(this).text() == 'Enabled') $(this).text('Disabled');
    });
});

Answer 1

不缓存，如果你缓存它，那么它将一直是相同的值，所以一旦你改变了文本。你的onclick仍然认为它是相同的，因为你缓存了值

$('tr[id^=mytablerow-]').on('click', function(){
   if ( $('a#action-toggle').text() == 'Enabled' ) {
       alert('action enabled'); 
   }
});

我认为你甚至不需要每一个。将它绑定到选择器将确保绑定到每个选择器。

Answer 2

您需要每次检查切换文本，因为它是动态的。

$('tr[id^=mytablerow-]').each(function(){          
        $(this).on('click', function(){
            if ( $('a#action-toggle').text() == 'Enabled' ) {
                 alert('action enabled'); 
            }
        });
});

Answer 3

你能解释为什么你认为每个都是必要的吗？ jQuery（）。click将处理大量的点击处理程序。但是，如果您有太多的时间，那么所有这些点击事件都会降低您的网页速度。使用带有选择器的jQuery尝试事件委派。

我还举了一个使用“启用了点击”的类而不是进行字符串匹配的示例

$(function(){
// Instantiate class for enabled / disabled state.
if($('#action-toggle').text() == 'Enabled')
    $('#action-toggle').addClass('click-enabled');
else
    $('#action-toggle').removeClass('click-enabled');

// Update state class and text when clicked
$('#action-toggle').on('click', function(ev){
    ev.preventDefault();
    if($(this).is('.click-enabled'))
        $(this).text('Disabled').removeClass('click-enabled');
    else 
        $(this).text('Enabled').addClass('click-enabled');
    });

// Listen for click events on any trs with id ^= mytablerow-.
// This is 1 event handler that will handle any click on any of those trs, and var self will contain the reference to that specific tr.
$('table').on('click', 'tr[id^=mytablerow-]', function(ev){
    var self = $(ev.target);
    if($('a#action-toggle').is('.click-enabled') ){
        alert('action enabled');
        }
    });
});

编辑：示例，说明如何根据确切的目标元素运行多个操作。另见：

$('table').on('click', 'tr[id^=mytablerow-]', function(ev){
    var self = $(ev.target); // $(this) also works
    var td = self.closest('td');
    var tr = td.parent();
    if($('a#action-toggle').is('.click-enabled') ){

        if(td.is('.action1'))
            alert(' Running action 1');

        if(tr.is('.row3'))
            alert('running action row3');
        }
    });

对表行的单击函数有条件

3 个答案: