Question

我试图从用于突出显示验证错误的div中删除红色边框。我想用透明度替换边框，以便在点击具有.swatches类的元素时，边框被删除＆＃34;。

此代码确实有效（包括注释掉的行），但此问题出现在移动Chrome浏览器上。

知道问题是什么吗？

课程cf和colour-form-field没有与之相关的任何样式。

$('.swatches').click(function(){
    removeValidationBorder('#optionHolder', 'transparent'); //#f8f8f8
});

这是我的功能。

function removeValidationBorder(el, color) {
    console.log('removeValidationBorder');
    //if ($(el).css('color') == 'rgb(0, 0, 0)' || $(el).css('color') == 'red') {
    if ($(el).css('color') != color) {
        console.log('colors do not match');
        //$(el).css('border','2px solid ' + color);
        $(el).css({"border-width" : "2px", "border-style" : "solid", "border-color" : color});
    }
}

这里是HTML：

<div id="optionHolder" class="cf colour-form-field" style="border: 2px solid transparent; margin-bottom: 4px;">
    <div id="colOptions" class="form-label">
      <h6>Select a colour: <span id="selectedColor">Silver - add £10.00</span></h6>
     </div>
     <ul class="swatches">
       <li id="productSwatch_83995"><a id="photoswitch_76171" title="Natural" href="#"><img src="images/products/options/76166_swatch.png" width="46" height="36" alt="Natural" title="Natural" border="0"><p><span>Natural</span></p></a></li>
       <li id="productSwatch_83996"><a id="photoswitch_76172" title="Black" href="#"><img src="images/products/options/76167_swatch.png" width="46" height="36" alt="Black" title="Black" border="0"><p><span>Black - add £10.00</span></p></a></li>
       <li id="productSwatch_83997"><a id="photoswitch_76173" title="Sand" href="#"><img src="images/products/options/76168_swatch.png" width="46" height="36" alt="Sand" title="Sand" border="0"><p><span>Sand - add £10.00</span></p></a></li>
       <li id="productSwatch_83998"><a id="photoswitch_76174" title="Cappuccino" href="#"><img src="images/products/options/76169_swatch.png" width="46" height="36" alt="Cappuccino" title="Cappuccino" border="0"><p><span>Cappuccino - add £10.00</span></p></a></li>
       <li id="productSwatch_83999" class="selected"><a id="photoswitch_76175" title="Silver" href="#"><img src="images/products/options/76170_swatch.png" width="46" height="36" alt="Silver" title="Silver" border="0"><p><span>Silver - add £10.00</span></p></a></li>
   </ul>                        

<input type="hidden" name="options[1]" value="83999" id="photoOptionDropDown">
</div>

Answer 1

您可以尝试：

var color = none;

和border将被破坏，并且不会显示。

Answer 2

这不起作用，因为移动Chrome已弃用.click。我不能使用jquery mobile所谓的我的函数如下：

$('#selectedColor').on('DOMSubtreeModified', function(){
    removeValidationBorder('#optionHolder', 'transparent');
});

使用Jquery / css删除移动Chrome上的红色边框

2 个答案: