Question

我对表b的onclick函数有问题，该函数无法确定表A是否具有 selected_upsize 类

场景：表B在表A中也有项目列表。现在，当我单击表B中的一项时，on选项将满足条件，即表A是否具有selected_upsize类，以简化场景。

如果表 A 具有一类（selected_upsize），则它将发出警报，否则我在表B中单击的项将附加在表A上。

我的输出在这里

我的Onclick函数具有此功能

     $(".customer_edit_table_chaining_condiments").on('click',function(e){

                        //this is the item of table B that will append if the table A has no class
                        var customer_edit_condimentsScreenNameClicked = $(this).closest('tr').find('.customer_edit_condimentsScreenNameClicked').text();
                        var customer_edit_condimentsScreenPriced = $(this).closest('tr').find('.customer_edit_condimentsScreenPriced').text();

                       $(".customer_edit_table_chaining_condiments").on('click',function(e){

        //this is the item of table B that will append if the table A has no class
        var customer_edit_condimentsScreenNameClicked = $(this).closest('tr').find('.customer_edit_condimentsScreenNameClicked').text();
        var customer_edit_condimentsScreenPriced = $(this).closest('tr').find('.customer_edit_condimentsScreenPriced').text();

       if($('#noun_chaining_order').find('tr.selected_upsize').length){    

            alert('You can"t upsize the item');
       }else{                                        
            $('table#noun_chaining_order').append('<tr class="" id="append_imaginary_upsize_condiments"><td contenteditable="true">-</td><td>'+customer_edit_condimentsScreenNameClicked+'</td><td>'+customer_edit_condimentsScreenPriced+'</td></tr>');
            $('tr#append_imaginary_upsize_condiments').addClass('selected_upsize');

       }
})

我的HTML表A

<table class="table table-hover upsize_check" id="noun_chaining_order" style="border:none;">
<thead>
    <tr style="font-size: 15px;  color:white;">
        <th scope="col">Qty</th>
        <th scope="col">Condiments</th>
        <th scope="col">Price</th>
    </tr>
</thead>
<tbody style="font-size:14px; color:white;" class="tbody_noun_chaining_order">                  

</tbody>

表B

<table  class="table table-striped table-bordered " id="customer_table_update_chain_order" style="width:100%">
<div class="content-noun" style="text-align: center;">
<thead>
    <tr style="background: linear-gradient(-20deg, #00e4d0, #5983e8); color:white;" >
        <th>Condiment Screen Name</th>
         <th>Condiment Price</th>
         <th>Condiment Image</th>
    </tr>
</thead>
    </div>
<tbody>

</tbody>

Answer 1

$(".customer_edit_table_chaining_condiments").on('click',function(e){

    //this is the item of table B that will append if the table A has no class
    var customer_edit_condimentsScreenNameClicked = $(this).closest('tr').find('.customer_edit_condimentsScreenNameClicked').text();
    var customer_edit_condimentsScreenPriced = $(this).closest('tr').find('.customer_edit_condimentsScreenPriced').text();

    //here will check if table A has selected upsize or not

    //THE BELOw LINE WILL RETURN ALL THE ELEMENTS WITH SELECTED_UPSIZE CLASS IF WE HAVE .SELECTED_UPSIZE IN THE FIND METHOD, THUS THE BELOW LINE WILL ALWAYS BE TRUE
    $('table#noun_chaining_order').find('.upsize_check').each(function(){
    //INSTEAD IF YOU SEARCH FOR THE ELEMENTS WITH A DIFFERENT CLASS as in the above line of code, THAT MIGHT OR MIGHT NOT HAVE THE SELECTED_UPSIZE CLASS WITH IT, THEREFORE MAKING THE BELOW STATEMENTS LEGAL
        if ($(this).hasClass('selected_upsize')) {

            alert('You can"t upsize the item');
        }
        else
        {
            $('table#noun_chaining_order').append('<tr class="" id="append_imaginary_upsize_condiments"><td contenteditable="true">-</td><td>'+customer_edit_condimentsScreenNameClicked+'</td><td>'+customer_edit_condimentsScreenPriced+'</td></tr>');
            $('tr#append_imaginary_upsize_condiments').addClass('selected_upsize');
        }

    });

});

在下面添加解决方案。...

HTML

<table class="table table-hover" id="noun_chaining_order" style="border:none;">
<thead>
    <tr style="font-size: 15px;  color:white;">
        <th scope="col">Qty</th>
        <th scope="col">Condiments</th>
        <th scope="col">Price</th>
    </tr>
</thead>
<tbody style="font-size:14px; color:white;" class="tbody_noun_chaining_order">                  
</tbody>

<table  class="table table-striped table-bordered " id="customer_table_update_chain_order" style="width:100%">
    <div class="content-noun" style="text-align: center;">
    <thead>
        <tr style="background: linear-gradient(-20deg, #00e4d0, #5983e8); color:white;" >
             <th>Condiment Screen Name</th>
             <th>Condiment Price</th>
             <th>Condiment Image</th>
        </tr>
    </thead>
    </div>
<tbody>

</tbody>

JAVASCRIPT

$("#customer_table_update_chain_order tbody tr").on('click',function(e){

                //this is the item of table B that will append if the table A has no class
                var customer_edit_condimentsScreenNameClicked = $(this).find('.customer_edit_condimentsScreenNameClicked').text();
                var customer_edit_condimentsScreenPriced = $(this).find('.customer_edit_condimentsScreenPriced').text();

                //here will check if table A has selected upsize or not
                        $('table#noun_chaining_order tbody tr').each(function(){
                    if ($(this).hasClass('selected_upsize')) {

                    sameRow = true;
                  }
                  else
                  {
                    sameRow =false;
                    $('table#noun_chaining_order').append('<tr class="" id="append_imaginary_upsize_condiments"><td contenteditable="true">-</td><td>'+customer_edit_condimentsScreenNameClicked+'</td><td>'+customer_edit_condimentsScreenPriced+'</td></tr>');
                    $('tr#append_imaginary_upsize_condiments').addClass('selected_upsize');
                  }

                    });


            if(sameRow){
                alert('You can"t upsize the item');
            }

              });

Answer 2

请尝试这个。如果我的理解是正确的，那应该可以。

$(".customer_edit_table_chaining_condiments").on('click',function(e){

        //this is the item of table B that will append if the table A has no class
        var customer_edit_condimentsScreenNameClicked = $(this).closest('tr').find('.customer_edit_condimentsScreenNameClicked').text();
        var customer_edit_condimentsScreenPriced = $(this).closest('tr').find('.customer_edit_condimentsScreenPriced').text();

       if($('#noun_chaining_order').find('tr.selected_upsize').length){    

            alert('You can"t upsize the item');
       }else{                                        
            $('table#noun_chaining_order').append('<tr class="" id="append_imaginary_upsize_condiments"><td contenteditable="true">-</td><td>'+customer_edit_condimentsScreenNameClicked+'</td><td>'+customer_edit_condimentsScreenPriced+'</td></tr>');
            $('tr#append_imaginary_upsize_condiments').addClass('selected_upsize');

       }
})

如何使用jQuery的hasClass函数检查表是否具有类？

2 个答案: