Question

我尝试使用jquery更改内联css。但它没有改变。

这是我的HTML代码

<div class="page1" style="background: url(modules/mod_test/tmpl/img/1.jpg); width:100%;"></div>
<div class="page2" style="background: url(modules/mod_test/tmpl/img/2.jpg); width:100%;"></div>
<div class="page3" style="background: url(modules/mod_test/tmpl/img/3.jpg); width:100%;"></div>
<div class="page4" style="background: url(modules/mod_test/tmpl/img/4.jpg); width:100%;"></div>

这是我写的代码

 $(document).ready(function() {
        $('.test-img').click(function() {
            $('.page1').css("background", "images/1.jpg","width", "100%");
$('.page2').css("background", "images/2.jpg","width", "100%");
$('.page3').css("background", "images/3.jpg","width", "100%");
$('.page4').css("background", "images/4.jpg","width", "100%");
        });   
    });

但它不会改变图像。任何人都可以帮我解决这个问题吗？

Answer 1

一般情况下使用css()函数如下：

$('your_element').css({'prop_one': 'prop_one_value', 'prop_two': 'prop_two_value', ... });

因此，在您的情况下，您忘记了{}并且未正确分配css规则'prop':'value'：

$('.page1').css({"background": "url('images/1.jpg')","width": "100%"});

Answer 2

我在脚本中的CSS声明中发现了一些语法错误。您应该先参考jQuery API doc for CSS。并且需要使用浏览器的检查器/调试器工具进行调试。

这里你错过了花括号{} 和冒号：语法内部。我已更改为在下面的代码段中更正了一个。

此外，您应该浏览Joomla的文档Adding JavaScript and CSS。

改进代码：

$(document).ready(function() {
        $('.test-img').click(function() {
            $('.page1').css({"background": "images/1.jpg","width": "100%"});
        });   
    });
});

如果您使用的是其他JavaScript库，例如MooTools或YUI，您可以将其更改为特定的：

(function($){
    $(document).ready(function() {
        $('.test-img').click(function() {
            $('.page1').css({"background": "images/1.jpg","width": "100%"});
        });   
    });
}(jQuery));

希望这会对你有所帮助。

Answer 3

要使用jQuery定义多个 css属性，您需要使用:分隔每个属性值，并使用,和

分隔每个css属性

试试这样：

$('.page1').css({"background":"url('images/1.jpg')","width":"100%"});

单个 css属性输入示例：

$('.page1').css("background","images/1.jpg");

Here is jQuery api css referance.

如何在joomla中使用jquery更改内联css

3 个答案: