Javascript WooCommerce-jQuery-显示多个选定样本的标题

我需要使用jQuery获得几个选定对象的值，并分别显示每个对象的标题

我正在使用WooCommerce的变体样本和照片插件。选择样例后，我希望在属性标题旁边显示该样例名称。我找到了一个分部，但是我需要为每个类循环函数，因为我有多个样例选项

变体样例插件中的代码是

<table class="variations-table" cellspacing="0">
        <tbody>
            <?php
            $loop = 0;
            foreach ($this->attributes as $name => $options) : $loop++;
                ?>
                <tr>
                    <td class="attribute_title_label"><label for="<?php echo sanitize_title($name); ?>"><?php echo wc_attribute_label($name); ?> : </label></td>
                </tr>
                <tr>
                    <td class="attributes_border">
                        <?php
                        if (isset($this->swatch_type_options[sanitize_title($name)])) {
                            $picker_type = $this->swatch_type_options[sanitize_title($name)]['type'];
                            if ($picker_type == 'default') {
                                $this->render_default(sanitize_title($name), $options);
                            } else {
                                $this->render_picker(sanitize_title($name), $options);
                            }
                        } else {
                            $this->render_default(sanitize_title($name), $options);
                        }
                        ?>
                    </td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>

如果您只有一个样例面板，则该脚本可以工作，但我将有几个样例选项。所以我会选择颜色、大小和方向作为样例

我知道我需要在每个类上运行一个函数，但是我的尝试没有成功。这就是我想到的：

$(function () {
 function changeName) {
     $("td.attributes_border").each(function(){
         
         var swatchname = "",
             swatchname = $(".selected a.swatch-anchor").attr('title');
        if(swatchname){
           $(".attribute_title_label label").html(+swatchname);
        }else{
           $(".attribute_title_label label").html("Please select an option");
        }
        });
$("div.select").on("change", changeName);
changeName();
});

jQuery('table').change(function(){  
    $('.swatchcontainer').each(function() {
    var swatchname = $(this).find("div.selected a.swatch-anchor").attr('title');
    if(swatchname){
        $(this).find("span.swatchname").html(swatchname);
    }else{
        $(this).find("span.swatchname").html("Please select an option");
    }
});
});

我相信这很简单，但我的javascript和jquery知识非常有限

---

谢谢

经过几个小时的反复试验，我找到了解决问题的办法

首先，我稍微改变了一下我的桌子。我删除了包含标题的表格行，并将其更改为表格单元格（我只将其设置为行，以便将其放在单独的行上，这是我用CSS修复的）。这允许我让每个循环只包含一个表行，我给它分配了一个类“swatchcontainer”。 其次，我用类“swatchname”添加了一个span。这给了我一个返回值的占位符。允许我使用默认属性标题。 这是php：

    <table class="variations-table" cellspacing="0">
        <tbody>
            <?php
            $loop = 0;
            foreach ($this->attributes as $name => $options) : $loop++;
                ?>
                <tr class="swatchcontainer">
                    <td class="attribute_title_label"><label for="<?php echo sanitize_title($name); ?>"> <?php echo wc_attribute_label($name); ?> : <span class="swatchname"> </span></label>
                    </td>
                    <td class="attributes_border">
                        <?php
                        if (isset($this->swatch_type_options[sanitize_title($name)])) {
                            $picker_type = $this->swatch_type_options[sanitize_title($name)]['type'];
                            if ($picker_type == 'default') {
                                $this->render_default(sanitize_title($name), $options);
                            } else {
                                $this->render_picker(sanitize_title($name), $options);
                            }
                        } else {
                            $this->render_default(sanitize_title($name), $options);
                        }
                        ?>
                    </td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>

我的逻辑是，每当对表进行更改时（无论是页面加载还是用户单击样例），函数都会运行

然后我将.each用于我的tr类，这样它就可以在每个tr.swatchcontainer中循环

swatchname变量的定位是使用.find来定位函数当前正在运行的tr中的元素（$（this））

如果存在值，则使用简单的if-else语句。使用相同的$（this）.find分配值，以确保它应用于当前tr中的元素

希望这是正确的，或者至少是可以接受的，但它确实有效

jQuery('table').change(function(){  
    $('.swatchcontainer').each(function() {
    var swatchname = $(this).find("div.selected a.swatch-anchor").attr('title');
    if(swatchname){
        $(this).find("span.swatchname").html(swatchname);
    }else{
        $(this).find("span.swatchname").html("Please select an option");
    }
});
});