1

背景画像を header:before 要素に挿入しようとしていますが、jquery が失敗します。

HTML コンテンツ 

 <a href="image.jpg" class="image-source">Try insert image into .header:before</a>

JS

 $('.image-source').click(function() {
   var src = $(this).attr('href');
    // slash is okay
    $('.header:before').css('backgroundImage', 'url(/' + src + ')'); 
    return false;
 });

CSS:

.header {
  position: relative;
  background: url(anotherimage.jpg) no-repeat;
}
.header:before  {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  min-width:50%;
  min-height:50%;
  content: "";
}

私がここでバグを扱っているのか、それとも明らかなものを見逃しているのか、誰にも分かりますか? .header複数の背景画像を使用しているため、それ自体を使用できないことに注意してください:before。

更新: これかもしれません:

4

3 に答える 3

2

jQuery を使用して疑似要素を操作することはできません。それらは DOM の一部ではありません。これについても、醜い回避策を避けたいと思うかもしれません。

最も醜いものの1つですが、私の最善の回避策はこれです

var css = '.image:after { content: url("https://www.google.com/images/srpr/logo3w.png");  width: 400px; height: 100px; }';

$("#replaceable").html(css);
$("div").addClass('image');

$("div").click(function() {
    var css = '.image:after { content: url("http://www.google.com/logos/2012/elias_lonnrot-2012-hp.jpg");  width: 400px; height: 100px; }';
    $("#replaceable").html(css);
});

デモ

于 2012-04-10T12:43:19.927 に答える
1

javascriptを使用する代わりに、背景画像をストレートコンテンツとして挿入できます

.header:before  {
  ...
  content: url(...);
}
于 2012-04-10T12:26:57.103 に答える
1

これを行うのが最善だと思います：css：

header.first:after{/* your image etc */}
header.second:after{/* your image etc */}
header.third:after{/* your image etc */}

次にjQuery：

var headers = ["first","second","third"];
var i = 0;
$(".next").click(function(){
  i %= headers.length;
  $("header").removeClass(headers[i-1]).addClass(headers[i]);
  i++;
});
于 2012-04-10T12:34:57.817 に答える