JavaScript: вызов CSS-стиля в HTML не работает

Question

JavaScript: вызов CSS-стиля в HTML не работает

0

эй, я пытаюсь изучить jquery, и у меня проблема с изображениями, которые не отображаются, когда я использую jquery для добавления класса css в тег div здесь, это мой код

HTML:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<script src="jquery-2.1.0.min.js"></script>
<script src="javascript_stuff.js"></script>
<link href="stylesheet.css" rel="stylesheet" type="text/css">

</head>
    <h1>trying to find out whats wrong with this code</h1>
    <h2>Here is the picture</h2>


<body>

<p></p>
<div class="thumbnails">
<a href="Images/User Images/early-sunrays.jpg">
<img alt="sunrays" height="75" src="Images/User%20Images/early-sunrays_thumbnail.jpg" width="75"></a>
</div>
<div class="preview"></div>

</body>

Код css:

.preview{
    width:375px;
    height:375px;
    float:left;
}
.thumbnails{
    width:75px;
    height:75px;
    border:thick aqua solid;
}

Код jquery:

$(document).ready(function(){
    $('.thumbnails a').click(function(e){
        e.preventDefault();
        var pic_full = $(this).attr('href');
        var size =(pic_full.length-4);
        var pic_prev = pic_full.slice(0,parseInt(size))+"_preview"+pic_full.slice(parseInt(size));
        pic_prev = "../"+pic_prev;
        //alert(pic_prev);
        $('.preview').html('<a href="'+pic_full+'" style="background-image:url('+pic_prev+');"></a>');
    });
});

Это может быть глупый вопрос, но я не могу показать его, хотя путь правильный, и я пытаюсь создать CSS-стиль внутри html. Любая помощь будет оценена. Спасибо!

Tijo Jose 27 апр. 2014, в 06:50

Источник

1

Вы можете поделиться скрипкой?
Milind Anantwar 27 апр. 2014, в 04:28
0

где (jquery для добавления класса css в тег div) я не нахожу в вашем вопросе, можете ли вы добавить jsfiddle.
Dave 27 апр. 2014, в 05:16

Теги:

jquery

html

1 ответ

Ещё вопросы

где (jquery для добавления класса css в тег div) я не нахожу в вашем вопросе, можете ли вы добавить jsfiddle.

James Duffy · Accepted Answer · 2014-04-27T03-31-00.000Z

В background-image: url(../img/path) изображения должен быть окружен кавычками: background-image: url('../img/path')

В вашем случае измените последнюю строку вашего javascript на:

$('.preview').html('<a href="'+pic_full+'" style="background-image:url(\''+pic_prev+'\');"></a>');

(Обратите внимание на скрытые одиночные кавычки, связанные с pic_preview).

Кроме того, вы, вероятно, захотите изменить CSS .preview a для display: block если вы используете его, чтобы показать фоновое изображение.

.preview a {
  display: block;
  width: 75px;
  height: 75px;
  border:thick aqua solid;
}

JSFiddle: http://jsfiddle.net/vT6GC/

Надеюсь, вам стоит начать.