我正在一家WooCommerce商店购物。有些产品具有变化和三个属性（包括酱汁；第一个额外的酱汁和第二个额外的酱汁）。默认情况下，Woo显示所有变体。这个想法是在您访问页面时将第一和第二个调味料隐藏起来。当您单击包含的调味料时，将显示第一个额外的调味料。当您单击第一个额外的调味料时，将显示第二个额外的调味料。当您再次单击某些调味料时-必须将其隐藏。我有执行此操作的代码，但是当我重新单击任何额外的酱料时，它会将其隐藏，但丢失了先前选择的酱料的值，这就是该错误。如何解决？ 这是代码：

$（“。variations tr：nth-​​child（1）td ul li”）。on（'click'，function（）{         $（“。variations tr：nth-​​child（2）”）。show（）;

    var clicks = $(this).data('clicks');

    if(clicks) {

        $(".variations tr:nth-child(2)").hide();

        $(".variations tr:nth-child(3)").hide();

    } else {

        $(".variations tr:nth-child(2)").show();

    }

    $(this).data("clicks",!clicks);



});



$(".variations tr:nth-child(2) td ul li").on('click',function(){

    var clicks = $(this).data('clicks');

    if(clicks) {





        $(".variations tr:nth-child(2)").hide();

        $(".variations tr:nth-child(3)").hide();

    } else {

        $(".variations tr:nth-child(3)").show();

    }

    $(this).data("clicks",!clicks);



});



$(".variations tr:nth-child(3) td ul li").on('click',function(){

    var clicks = $(this).data('clicks');

    if(clicks) {



        $(".variations tr:nth-child(3)").hide();

    } else {

        $(".variations tr:nth-child(3)").show();

    }

    $(this).data("clicks",!clicks);



});









$(".variations tr:nth-child(1) td ul li:nth-child(1)").on('click',function(){

    $(".variations tr:nth-child(2)").hide();

    $(".variations tr:nth-child(3)").hide();

});



$(".variations tr:nth-child(2) td ul li:nth-child(1)").on('click',function(){

    $(".variations tr:nth-child(2)").hide();

    $(".variations tr:nth-child(3)").hide();



});







$(".variations tr:nth-child(2) td ul li:nth-child(1)").on('click',function(){

    $(".variations tr:nth-child(3)").hide();

});



$(".variations tr:nth-child(3) td ul li:nth-child(1)").on('click',function(){

    $(".variations tr:nth-child(3)").hide();

});