作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
想要将缩略图创建为链接,并将标题放在缩略图的右侧。
我尝试使用 after 并弄乱了 HTML,看看是否可以将它们跨在一起。
我该怎么做?
这是我的 JS:
$(function(){
var search = function(term, el){
$.get('https://www.googleapis.com/youtube/v3/search', {
part: 'snippet',
key: 'AIzaSyA8Dm-N-QCxPgkvkwiI0LkY0aK4ZPGfP3c',
q: term,
maxResults: 25
}, function(data){
display(data.items, el);
});
};
var display = function(videos, el){
el.empty();
$.each(videos, function(index, video){
var thumbnail = video.snippet.thumbnails.default.url;
var vidTitle = video.snippet.title;
var vidID = video.id.videoId;
var container = $('<span/>', { 'class': 'video-container' });
var thumbContainer = $('<div/>', { 'class': 'thumbnail' });
var thumbnailElement = $('<img/>', { 'src': thumbnail });
var thumbnailLink = $('<a/>', {'src': thumbnail});
thumbContainer.append(thumbnailElement).append(thumbnailLink);
var titleContainer = $('<span/>', { 'class': 'title' });
var titleElement = $('<a/>', {
'href': 'https://www.youtube.com/watch?v='+vidID,
'target': '_blank',
'html': vidTitle,
});
titleContainer.append(titleElement);
container.append(thumbContainer).append(titleContainer);
el.append(container);
});
};
//jQuery event listeners
$('.search-btn').on('click', function(event){
event.preventDefault();
var searchInput = $('.search-field').val();
search(searchInput, $('#search-results'));
});
});
这是我的 HTML:
<body>
<div class="container">
<div class="master-nav">
<form class="search-nav">
<span>
<img src="https://www.thinkful.com/learn/static/shared/images/tf-logo-blue-t-1200x1200.png">
</span>
<span class="brand">
<h1>hinkful Tube</h1>
</span>
<span class="search-query"><input class="search-field">
<button class="search-btn">Submit</button>
</span>
</form>
</div>
<div id="search-container">
<div id="search-results">
<span class="video-container"></span>
<span class="title"></span>
</div>
</div>
</div>
</body>
这是 CSS:
.container {
margin: 0 auto;
font-family: arial;
color: #4628FB;
}
.master-nav {
background-color: white;
height: 4.375rem;
width: 100%;
border-bottom: 1px solid #4628FB;
z-index: 9999;
}
.search-nav {
width: 1000px;
margin: 0 auto;
}
.search-query{
float: right;
padding: 10px 10px;
}
.brand{
float: left;
padding-left: 0px;
}
#search-results a {
}
#search-container {
width: 1000px;
margin: 10px auto;
}
.search-nav img {
width: 5%;
float:left;
padding-top: 10px
}
最佳答案
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.video-container{display:inline-block; width:100%}
.thumbnail{float:left;}
.container {
margin: 0 auto;
font-family: arial;
color: #4628FB;
}
.master-nav {
background-color: white;
height: 4.375rem;
width: 100%;
border-bottom: 1px solid #4628FB;
z-index: 9999;
}
.search-nav {
width: 1000px;
margin: 0 auto;
}
.search-query{
float: right;
padding: 10px 10px;
}
.brand{
float: left;
padding-left: 0px;
}
#search-results a {
}
#search-container {
width: 1000px;
margin: 10px auto;
}
.search-nav img {
width: 5%;
float:left;
padding-top: 10px
}
</style>
</head>
<body>
<div class="container">
<div class="master-nav">
<form class="search-nav">
<span>
<img src="https://www.thinkful.com/learn/static/shared/images/tf-logo-blue-t-1200x1200.png">
</span>
<span class="brand">
<h1>hinkful Tube</h1>
</span>
<span class="search-query"><input class="search-field">
<button class="search-btn">Submit</button>
</span>
</form>
</div>
<div id="search-container">
<div id="search-results">
<span class="video-container"></span>
<span class="title"></span>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var search = function(term, el){
$.get('https://www.googleapis.com/youtube/v3/search', {
part: 'snippet',
key: 'AIzaSyA8Dm-N-QCxPgkvkwiI0LkY0aK4ZPGfP3c',
q: term,
maxResults: 25
}, function(data){
display(data.items, el);
});
};
var display = function(videos, el){
el.empty();
$.each(videos, function(index, video)
{
var thumbnail = video.snippet.thumbnails.default.url;
var vidTitle = video.snippet.title;
var vidID = video.id.videoId;
var element = "<span class='video-container'><div class='thumbnail'><a href='https://www.youtube.com/watch?v="+vidID+"' target='_blank'><img src='"+thumbnail+"'></a></div><span class='title'>"+vidTitle+"</span></span>";
el.append(element);
});
};
//jQuery event listeners
$('.search-btn').on('click', function(event){
event.preventDefault();
var searchInput = $('.search-field').val();
search(searchInput, $('#search-results'));
});
});
</script>
</body>
</html>
关于javascript - 如何将缩略图作为链接并将标题附加到右侧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33139608/
我有一个具有可变数量子元素的固定大小的 div。我不知道 children 的大小。目标是缩小它们以适合父级。 例子: .parent { width: 100px; height: 100p
我是一名优秀的程序员,十分优秀!