0
次のコードを使用していますが、なぜ機能していないのかわからないようです。私の目標は、右側の6つの画像の1つのクリックに基づいて、フィーチャードアーティストクラスの背景画像を変更することです。CSSの背景画像を変更するjQueryを使用していない
FULL HTML
<!DOCTYPE html>
<html>
<head>
<title>PP - TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap core CSS -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Load FontAwesome Icons -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Posted Prints CSS -->
<link href="../html/css/posted-prints.css" rel="stylesheet" media="screen">
<!-- Load Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
<![endif]-->
</head>
<body>
<div id="artist" class="container-fluid featured-artist">
<div class="col-lg-3 artist-bio pull-right">
<h4>JOHN DOE</h4>
<h6><em>Artist Bio</em></h6>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="artist-link text-right"><em><a href="#">View all work from this artist</a></em></p>
<div class="row">
<div class="col-lg-4 artist-photo"> <img src="http://michaelfroseth.com/clients/postedprints/html/img/ER 1 (original).png" class="img-responsive" /> </div>
<div class="col-lg-4 artist-photo"> <img src="http://michaelfroseth.com/clients/postedprints/html/img/ER 1 (original).png" class="img-responsive" /> </div>
<div class="col-lg-4 artist-photo"> <img src="http://michaelfroseth.com/clients/postedprints/html/img/CG 7 (original).png" class="img-responsive" /> </div>
</div>
<div class="row">
<div class="col-lg-4 artist-photo"> <img src="http://michaelfroseth.com/clients/postedprints/html/img/ER 4 (original).png" class="img-responsive" /> </div>
<div class="col-lg-4 artist-photo"> <img src="http://michaelfroseth.com/clients/postedprints/html/img/ER 2 (original).png" class="img-responsive" /> </div>
<div class="col-lg-4 artist-photo"> <img src="http://michaelfroseth.com/clients/postedprints/html/img/other artists_F.png" class="img-responsive" /> </div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$('.artist-photo img').click(function(){
var images = $('.artist-photo img').attr('src');
$('.featured-artist').css('background-image','url('+images+')');
});
</script>
<script>
$('a').click(function(){
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500);
return false;
});
</script>
</body>
</html>
jQueryの
<script>
$('.artist-photo img').click(function(){
var images = $('.artist-photo img').attr('src');
$('.featured-artist').css('background-image','url('+images+')');
});
</script>
CSS
.featured-artist {
background-image: url('http://michaelfroseth.com/clients/postedprints/html/img/ER 8 (original) copy.png');
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;
}
誰もが作業を持っています私が勉強することができる同様の機能を使用するjsfiddle？
あなたはおそらく多くを得るだろう試してみてくださいあなたの実際のサイトの代わりにあなた自身のJSFiddleを提供した場合、より多くの助けが必要です。あなたのような外部サイトへのリンクは、将来の読者がここに来て、おそらくあなたの元の問題が何であったのかを参照する枠組みがないため、この質問を役に立たないものにしてしまうからです。 – leigero
私はお詫び申し上げます。私はかなり新しいstackoverflowので、プロセスの特定ではない。質問をする前にこれを自分で行うことを知っています。 –