简介:我叫亚历克斯。我前不久是一名WordPress开发人员,但六个月后才意识到自己不是真正的编码员。我是一位具有艺术学校背景的设计师,现在正在使用Webflow创建网站。
我正在开发一个个人项目,并且正在尝试使Isotope与Webflow一起使用。同位素已经建立并且几乎可以正常工作。我无法正常工作的是让同位素查看正确的div / class。我必须比现在正在研究的div更深入。如果我将一个类(网络,图形或视频)添加到.grid项,则它可以工作,那不是我所需要的。这些类会自动添加到另一个div内,这就是同位素应查找的位置。请看一下我的HTML,这比您希望我理解的要好:)
这是我的HTML:
<!DOCTYPE html>
<html data-wf-page="5ecc1738ef9a4b9ef96ce0d9" data-wf-site="5ecbb6f2fe4999288fed2b6e">
<head>
<meta charset="utf-8">
<title>Filter Test Isotope V2</title>
<meta content="width=device-width,initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link href="css/webflow.css" rel="stylesheet" type="text/css">
<link href="css/filter-test-isotope-0bd68152173cc6a5df2.webflow.css" rel="stylesheet" type="text/css">
<!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.classname+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.classname+=t+"touch")}(window,document);</script>
<link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body>
<div class="section portfolio">
<div class="container">
<ul role="list" class="filter">
<li class="category"><a data-filter="*" href="#">All</a></li>
<li class="category"><a data-filter=".web" href="#">Web design</a></li>
<li class="category"><a data-filter=".graphic" href="#">Graphic design</a></li>
<li class="category"><a data-filter=".video" href="#">Video</a></li>
</ul>
</div>
<div class="container">
<div class="collection-list-wrapper w-dyn-list">
<div class="item grid w-dyn-items">
<div class="grid-item w-dyn-item">
<div class="w-embed"><input type="hidden" class="web"></div>
<h1>Title</h1>
</div>
</div>
<div class="w-dyn-empty">
<div>No items found.</div>
</div>
</div>
</div>
</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js?site=5ecbb6f2fe4999288fed2b6e" type="text/javascript" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="js/webflow.js" type="text/javascript"></script>
<!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
</body>
</html>
这是我的脚本(我已将其放置在页脚中,但为清楚起见,我暂时将其删除:
<script>
var elem = document.querySelector('.grid');
var iso = new Isotope( elem,{
// options
itemSelector: '.grid-item',layoutMode: 'fitRows'
});
// element argument can be a selector string
// for an individual element
var iso = new Isotope( '.grid',{
// options
});
// init Isotope
var $grid = $('.grid').isotope({
// options
});
// filter items on button click
$('.filter').on( 'click','a',function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
</script>
所以,我需要的是同位素研究该div中的类
<div class="w-embed"><input type="hidden" class="web"></div>
此类是动态占用的,可以是Web,视频或图形。
是否有可能定位此div?希望您能理解我的意思以及我的解决方案!
非常感谢您!
亲切的问候,