Question

我在Prestashop商店中为产品属性定制了单选按钮，但现在所选尺寸在选择时不会改变外观（所需background:#000;color:#fff）。

此处的产品页面：http://catwalk-boutique.ro/pantofi/11-pantofi-piele-4578-burgundy.html

我想知道的是编辑单选按钮的“选定”状态的位置，或者阻止所选状态显示的位置（如果是这种情况）。

以下是目前为止改变的代码：
•在product.tpl中：

{elseif ($group.group_type == 'radio')}
   <ul style="padding-left:5px">{assign var=groupquantity value= $group.attributes_quantity}
      {foreach from=$group.attributes key=id_attribute item=group_attribute}
          <li>
              <input id="radio_{$groupName|escape:'html':'UTF-8'}-{$id_attribute}" type="radio" class="attribute_radio" name="{$groupName|escape:'html':'UTF-8'}" value="{$id_attribute}" {if ($group.default == $id_attribute)} checked="checked"{/if} />
              <label for="radio_{$groupName|escape:'html':'UTF-8'}-{$id_attribute}" data-comb-quantity="{*$groupquantity[$id_attribute]*}{foreach from=$combinations item=foo}{if $group_attribute == $foo.attributes_values[2]}{$foo.quantity}{/if}{/foreach}" class="radio_btn_round" >{$group_attribute|replace:' EU':''|escape:'html':'UTF-8'}</label>
          </li>
      {/foreach}
   </ul>
{/if}

•和CSS：

label.radio_btn_round {
background-color: #F8F8F8;
border: 1px solid #C8CCD2;
width: 30px;
height: 30px;
text-align: center;
vertical-align: middle!important;
line-height: 29px;}

input.attribute_radio {display: none;}

非常感谢任何想法。谢谢。

Answer 1

Prestashop为此生成的标记使得直接CSS无法实现这一点：

<li>
    <div>
         <span class="checked"><input value="37" selected></span>
    </div>
    <label>37</label>
</li>

CSS无法“升级”DOM（从“选定的”单选按钮中选择父div或li）。

因为jQuery在您的网站上可用，我认为您最好的选择是添加一些可以为您执行此操作的轻量级jQuery，并在标签上提供一个类，然后您可以通过CSS解决该问题：

// wait until the document is ready
jQuery(function($) {
    // watch for changes to the radio inputs
    $(document).on('change', 'input[type="radio"]', function() {
        $('.attribute_list li')
            // remove the class from all li elements
            .removeClass('checked')
            // find the "checked" radio button
            .find('input[type="radio"]:checked')
            // go up the dom to the nearest li
            .closest('li')
            // and add the "checked" class
            .addClass('checked');
    });
});

然后，在您的CSS中，此选择器将允许您更改所需的样式：

li.checked label.radio_btn_round {
    background: #000;
    color: white;
}

如何更改单选按钮的“选定”状态？

1 个答案: