Question

我有一个看起来像这样的div：

<div id="ProductPriceWrap" class="ProductPriceWrap">
                <div class="DetailRow RetailPrice" style="">
                    <span class="Label">MSRP:</span>
                    <strike>$249.00</strike>
                    <span class="YouSave" style=""> (You save <span class="YouSaveAmount">$174.00</span>)</span>
                </div>

                <div class="DetailRow PriceRow" style="">
                    <div class="Value">
                        <em id="ProductPrice" class="ProductPrice VariationProductPrice" style="color: black; ">$75.00</em>

                    </div>
                </div>


            </div>

我制作了这个脚本，以帮助客户了解所选的选项何时改变了价格：

$(document).ajaxSuccess(function(){

var currentPrice = $.trim($("#ProductPrice").text());

if(currentPrice == "%%GLOBAL_ProductPrice%%") 
{
        $("#ProductPrice").css('color','black');

        $("#ProductPrice").removeClass("PriceChanged")
}
else
{
    $("#ProductPrice").css('color','red');

    $('html, body').animate({
        scrollTop: $("#ProductPriceWrap").offset().top
    }, 1000);

    $("#ProductPriceWrap").animate({backgroundColor: "#ff0000" });

    $("#ProductPriceWrap").animate({backgroundColor: "#ffffff" });

    $( "#ProductPrice" ).addClass( "PriceChanged" );
    }

});
</script>

我想更改滚动到#ProductPriceWrap的函数，以便只有滚动它才能滚动到该元素。如果该元素已经可见，则不会滚动到该元素。我是JS和JQ的新手，甚至不知道从哪里开始。任何输入都非常感谢！谢谢！

Answer 1

似乎您正在寻找选择器:visible和功能.animate()。

最后你会得到类似的东西：

if ($("#ProductPriceWrap:not(:visible)")) {
  $("html, body").animate({
    scrollTop: $("#ProductPriceWrap").offset().top
  }, 1000);
}

仅当尚未显示时，Jquery才会滚动到元素

1 个答案: