Question

因此，我有一个在线商店产品页面，左侧显示产品图片，右侧有一些选项（大小，颜色）。现在，当客户登陆此页面时，使用一些javascript代码隐藏了一些颜色选项。该代码就像一个冠军。现在隐藏了颜色之后，我需要让其他代码选择第一个可见的颜色选项，以便页面的其他javascript代码将加载图像的正确彩色照片。所以，这是我正在使用的HTML代码：

<div class="productOptionPickListSwatch">
<ul>
    <li style="display: none;" class="swatch hasPreview swatchOneColour selectedValue">
        <label for="1cd2d5722d58b184b22e60490cb790ad">
            <span class="previewContent">
                <span class="swatchColours swatchOneColour showPreview" title="Ash Grey">
                    <span class="swatchColour swatchColour_1" style="background-color:#D2D4D3;">&nbsp;</span>
                </span>
            </span>
        <input checked="checked" class="validation" name="attribute[3091]" value="2704" id="1cd2d5722d58b184b22e60490cb790ad" type="radio">
        <span class="name">Ash Grey</span>
        </label>
    </li>
    <li style="display: none;" class="swatch hasPreview swatchOneColour">
        <label for="2ea2a6a1b415e9231d477cea8be09068">
            <span class="previewContent">
                <span class="swatchColours swatchOneColour showPreview" title="Black">
                    <span class="swatchColour swatchColour_1" style="background-color:#252525;">&nbsp;</span>
                </span>
            </span>
        <input class="validation" name="attribute[3091]" value="2708" id="2ea2a6a1b415e9231d477cea8be09068" type="radio">
        <span class="name">Black</span>
        </label>
    </li>
    <li style="display: none;" class="swatch hasPreview swatchOneColour">
        <label for="702b2730a02e931fb60b8b032ca421f1">
            <span class="previewContent">
                <span class="swatchColours swatchOneColour showPreview" title="Hunter Green">
                    <span class="swatchColour swatchColour_1" style="background-color:#0D2C26;">&nbsp;</span>
                </span>
            </span>
            <input class="validation" name="attribute[3091]" value="2731" id="702b2730a02e931fb60b8b032ca421f1" type="radio">
            <span class="name">Hunter Green</span>
        </label>
    </li>
    <li style="display: inline-block;" class="swatch hasPreview swatchOneColour">
        <label for="ab898f9ee27d5fba28b277b895f916f2">
            <span class="previewContent">
                <span class="swatchColours swatchOneColour showPreview" title="Red">
                    <span class="swatchColour swatchColour_1" style="background-color:#C01E36;">&nbsp;</span>
                </span>
            </span>
            <input class="validation" name="attribute[3091]" value="2766" id="ab898f9ee27d5fba28b277b895f916f2" type="radio">
            <span class="name">Red</span>
        </label>
    </li>
    <li style="display: inline-block;" class="swatch hasPreview swatchOneColour">
        <label for="237a97b716a4fec4ee62438c27e20570">
            <span class="previewContent">
                <span class="swatchColours swatchOneColour showPreview" title="Wine">
                    <span class="swatchColour swatchColour_1" style="background-color:#602B35;">&nbsp;</span>
                </span>
            </span>
            <input class="validation" name="attribute[3091]" value="2783" id="237a97b716a4fec4ee62438c27e20570" type="radio">
            <span class="name">Wine</span>
        </label>
    </li>
</ul>

现在，我没有创建上面的HTML代码，有些系统没有。但正如你所看到的，一些＆lt; li>标签有一个样式=＆＃34; display：none;＆＃34; （隐藏的颜色选项）并且有两个有样式=＆＃34;显示：内联块;＆＃34; （可用的颜色选项）。

我希望能够做的只是过滤＆lt;李＆GT;标签有＆＃34;样式＆＃34;等于＆＃34;内联块＆＃34;然后，一旦找到第一个，将其类更改为＆＃34; selectedValue＆＃34;添加并设置输入＆＃34; checked = checked＆＃34;。我的javascript代码可以工作，但设置了第一个＆lt;李＆GT;无论样式设置为什么标记。

<script>
    $(document).ready(function() {
    $('#about').addClass('expand');
    $(".productOptionPickListSwatch ul").each(function(){
    $(this).children("li").first().addClass("selectedValue");
    $("li.selectedValue input.validation").attr('checked',true);

    });
    });
</script>

那么，这种过滤器是否可行？它去哪儿了？我错过了什么？

感谢您的任何意见。

UPDATE ________

所以，我使用了@dtanders提供的代码，它基于我的初始请求中提供的代码。但是当代码在实际页面上进行测试时，没有任何反应。正如我在下面的一条评论中所述，有一些javascript正在过滤样本并添加＆＃34;样式＆＃34;信息到＆lt;李＆GT;标签。我找到了代码：

for (var j=0; j < colorArray.length; j++){
    console.log(colorArray[j]);
     $('.productOptionPickListSwatch span[title="'+ colorArray[j] + '"]').closest('li').css('display', 'inline-block');
  }

然后我添加了@dtanders提供的代码：

for (var j=0; j < colorArray.length; j++){
    console.log('colorArray: ' + colorArray[j]);
    console.log('colorArray_J: ' + j);
     $('.productOptionPickListSwatch span[title="'+ colorArray[j] + '"]').closest('li').css('display', 'inline-block')
                     .first().addClass("selectedValue")
     .find("input.validation").prop('checked',true);
  }

这种作品。我得到了＃34; selectedValue＆＃34;添加到＆lt;李＆GT;标签的类，但＆＃34;输入＆＃34;没有得到更新。

所以，现在一个新问题，为什么赢得＆lt;输入＆GT;标签得到更新？

Answer 1

$(function() {
   $('#about').addClass('expand');
   $(".productOptionPickListSwatch ul li[style*='inline-block']")
         .first().addClass("selectedValue")
         .find("input.validation").prop('checked',true);
});

Should work

Answer 2

所以，多亏了@dtanders和一堆谷歌，我终于开始工作了。

for (var j=0; j < colorArray.length; j++){
    console.log('colorArray: ' + colorArray[j]);
    console.log('colorArray_J: ' + j);
     if(j == 0)
     {
            $('.productOptionPickListSwatch span[title="'+ colorArray[j] + '"]').closest('li').find('input.validation').click().prop('checked',true);
            $('.productOptionPickListSwatch span[title="'+ colorArray[j] + '"]').closest('li').css('display', 'inline-block')
                     .first().addClass("selectedValue");
     }
     else
     {
            $('.productOptionPickListSwatch span[title="'+ colorArray[j] + '"]').closest('li').css('display', 'inline-block');
     }
  }

此代码最终被插入到页面上较早处理样本的位置。我没有写那段代码，我只是坚持了我的修改。

感谢您的帮助！

可以通过＆＃34;样式＆＃34;过滤javascript已过滤的<li>标记列表的值？

2 个答案: