Question

如何使用javascript更改图像和更改类名？

我尝试使用我的代码但没有工作，出了什么问题？

此代码将

将班级名称从.black更改为.red
从
更改元素
<div id="abcd" style=" border-radius: 3px; border: 1px solid #ccc; padding: 10px;"> <img src="https://0.s3.envato.com/files/122605825/thumb.png"/> </div>

到

<div id="abcd" style=" border-radius: 3px; border: 1px solid #ccc; padding: 10px;">
    <img src="https://0.s3.envato.com/files/118176445/thumbnail.png"/>
</div>

http://jsfiddle.net/28L8yk79/1/

javascript代码

<script>
function test_fn() {           
    $('#12345-6).html('<div id="abcd" style=" border-radius: 3px; border: 1px solid #ccc; padding: 10px;"><img src="https://0.s3.envato.com/files/118176445/thumbnail.png"/></div>').addClass('red').removeClass('black');    
}
</script>

请使用我的代码解决我。谢谢

Answer 1

试试这个：

<script>
function test_fn() {    
    $('#12345-6')
          .removeClass('black')
          .addClass('red')
          .find('#abcd img')
               .attr('src', 'https://0.s3.envato.com/files/118176445/thumbnail.png');
}
</script>

https://jsfiddle.net/28L8yk79/15/

Answer 2

你错过了一个＆＃39;在选择器中：

<script>
function test_fn() {           
    $('#12345-6').html('<div id="abcd" style=" border-radius: 3px; border: 1px solid #ccc; padding: 10px;"><img src="https://0.s3.envato.com/files/118176445/thumbnail.png"/></div>').addClass('red').removeClass('black');    
}
</script>

Answer 3

请参阅更新的fiddle。缺少选择器中的'

function test_fn() {           
     $('#12345-6').html('<div id="abcd" style=" border-radius: 3px; border: 1px solid #ccc; padding: 10px;"><img src="https://0.s3.envato.com/files/118176445/thumbnail.png"/></div>').addClass('red').removeClass('black');    
}

Answer 4

正如@Beamer所说，我会用更实用的东西。你不需要再次注入html，只需修改你的。

function test_fn() {           
var imageUrl = 'https://0.s3.envato.com/files/118176445/thumbnail.png'
$('#12345-6').addClass('red').removeClass('black').find('img:first').attr('src', imageUrl);

}

如何使用javascript更改图像和更改类名？

4 个答案: