Question

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

我正在使用WooCommerce和Variation Swatches and Photos插件。选择样本时，我想在属性标题旁边显示该样本名称。我发现了一个部分solution，但我需要为每个类循环的函数，因为我有多个样本选项。

Variation Swatches插件的代码是

<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>

上述解决方案中提供的jQuery是：

    (function($){
"use strict";
$('body').on('change', 'div.select', function(event){
var colorname = "";
var colorname = $(".selected a.swatch-anchor").attr('title');
if(colorname){
   $(".variations-table label").html('Color: ">'+colorname);
}else{
   $(".variations-table label").html("Please select a color");
}
});
})(jQuery);

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

我知道我需要在每个班级上运行一个函数，但我的尝试并不成功。这就是我想出的：

$(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();
});

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

由于

Answer 1

经过数小时的反复试验，我找到了解决问题的方法。

首先，我改变了我的桌子。我删除了持有标题的表格行并将其更改为表格单元格（我只将其设置为行以将其放在单独的行上 - 我用CSS修复）。这允许我让每个循环只包含一个表行，我为其分配了一个类＆＃34; swatchcontainer＆＃34;。其次，我添加了一个班级＆＃34; swatchname＆＃34;。这给了我一个返还值的占位符。允许我使用默认属性标题。这是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>

接下来，令人沮丧的部分是写一个满足我要求的脚本。我知道问题在于找到所选值并将其应用于同一行中的单元格。我提出了：

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");
    }
});
});

我的逻辑是，只要表格发生了变化（页面加载或用户点击了一个样本，该函数就会运行。
我然后将.each用于我的tr类，以便它可以遍历每个tr.swatchcontainer。
使用.find找到swatchname变量来定位当前正在运行的函数中的元素（$（this））
如果有值，则使用简单的if else语句。使用相同的$（this）.find分配值，以确保它应用于当前tr中的元素。

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

WooCommerce - jQuery - 显示Muliple精选样本的标题

1 个答案: