JQuery - изменить несколько фоновых изображений

Question

У меня есть код CSS, который создает кадр с помощью 8 изображений:

background-image: url(images/blue/tl.png), url(images/blue/tr.png), url(images/blue/bl.png), url(images/blue/br.png), url(images/blue/t.png),url(images/blue/b.png),url(images/blue/l.png),url(images/blue/r.png); 
background-position: top left, right top, bottom left, bottom right, top, bottom, left,right; 
background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-x,repeat-y,repeat-y; 

Моя цель состоит, чтобы сделать программу JQuery, которые могут изменить источники различных изображений. У меня проблема с определением изменения в JQuery для нескольких фоновых изображений. У меня всегда заканчивается только одно изменение изображения.

JQuery код:

$(document).ready(function() { 
     $("#red").on("click", function(){ 
      $("#outer-frame").css({'background-image': "url(images/red/tl.png)", 'background-image': "url(images/red/tr.png)"}); 
      $("#outer-frame").css({'background-position': "top left", 'background-image': "top right"}); 
     }); 

Я был бы очень признателен, если кто-то, кто знает, как сделать это помогло бы мне. Благодарим вас за консультацию.

Answer 1

Чтобы установить несколько фоновых изображений с JavaScript, вы устанавливаете стиль только один раз, но со строкой из нескольких слоев в качестве значения, в противном случае каждый сброс стиля перезаписывает предыдущий и т.д.

$("#outer-frame").css({ 
    'background-position' : 'top left', 
    'background-image' : 'url(images/red/tl.png), url(images/red/tr.png)' 
});