Question

我有这个Javascript：

<script>          
$('.tile').on('click', function () {

    $(".tile").addClass("flipOutX");
    setTimeout(function(){
        $(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load("company-overview.html");
    }, 2000);

});
</script>

这很棒，因为它会将另一个页面加载到当前页面中，这很有帮助。

问题是，如何更改已加载的类的背景颜色？

该类被称为metro，其包含在其css中，用于应用主页面的背景颜色。

编辑-------

我的JS现在看起来像这样但仍然不起作用......

<script>          
$('.tile').on('click', function () {

    $(".tile").addClass("flipOutX");
    setTimeout(function(){
        $(".metro.tile-area-darkCrimson").css('background-color', '#f36c20');
        $(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load("musability-musictherapy-company-overview.html");
    }, 2000);

});
</script>

不确定有什么问题在这里真的很感激！

btw .metro.tile-area-darkCrimson的CSS类看起来像这样......

.metro .tile-area-darkCrimson {
  min-width: 100%;
  height: 100%;
  background-color: #1f255b !important;


    transition: background-color .25s ease-in-out;
    -moz-transition: background-color .25s ease-in-out;
    -webkit-transition: background-color .25s ease-in-out;

}

Answer 1

也许你应该只加载company-overview.html页面的片段而不是添加另一个body元素。

来自https://api.jquery.com/load/

加载页面碎片

与$ .get（）不同，.load（）方法允许我们指定一部分   要插入的远程文档。这是通过特殊的方式实现的   url参数的语法。如果有一个或多个空格字符   包含在字符串中，第一个字符串后面的字符串部分   假设space是一个确定内容的jQuery选择器   要加载。

$( "#result" ).load( "ajax/test.html #container" );

加载内容后，您还可以通过传递回调函数来添加/删除css类或更改css：

回调功能

如果＆＃34;完成＆＃34;提供回调，之后执行   已经执行了后处理和HTML插入。回调是   为jQuery集合中的每个元素触发一次，然后设置   依次为每个DOM元素。

$( "#result" ).load( "ajax/test.html", function() {
  $('.my-class', '#result').removeClass('my-class');
});

Answer 2

您可以为您的加载方法添加回调：

$(".tile-group.main").css({ marginLeft:"-40px", width: "1080px"}).load(
  "company-overview.html",
  function() {
        $(".metro").css("background-color", "red");
    }
);

javascript添加其他属性更改

2 个答案: