同位素项目 - 使链接可点击，而不是整个项目

时间：2014-08-19 16:26:00

标签： jquery hyperlink jquery-isotope

我从我找到的一些代码中敲了一下同位素布局的演示。

在这里演示：http://www.fastnetstaging.co.uk/playground/isotope-property.html

每个＆＃39;项目＆＃39; （div）是可点击的。

问题：我只希望文本可以克隆（即prop1，prop2等），而不是整个项目div。

如何通过编辑html / script来实现这一目标？

HTML：

<html>
<head>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.isotope.js" type="text/javascript"></script>
</head>
<body>

<div id="startekContainer" class="results">
  <div class="item"><a href="#">prop1<br /> <img src="images/img04.jpg" /></a></div>
  <div class="item"><a href="#">prop2<br /> <img src="images/img05.jpg" /></a></div>
  <div class="item"><a href="#">prop3<br /> <img src="images/img06.jpg" /></a></div>
  <div class="item"><a href="#">prop4<br /> <img src="images/img07.jpg" /></a></div>
  <div class="item"><a href="#">prop5<br /> <img src="images/img09.jpg" /></a></div>
  <div class="item"><a href="#">prop6<br /> <img src="images/img10.jpg" /></a></div>
  <div class="item"><a href="#">prop7<br /> <img src="images/img11.jpg" /></a></div>
  <div class="item"><a href="#">prop8<br /> <img src="images/img12.jpg" /></a></div>
  <div class="item"><a href="#">prop9<br /> <img src="images/img13.jpg" /></a></div>
  <div class="item"><a href="#">prop10<br /> <img src="images/img04.jpg" /></a></div>
  <div class="item"><a href="#">prop11<br /> <img src="images/img05.jpg" /></a></div>
  <div class="item"><a href="#">prop12<br /> <img src="images/img06.jpg" /></a></div>
  <div class="item"><a href="#">prop13<br /> <img src="images/img07.jpg" /></a></div>
  <div class="item"><a href="#">prop14<br /> <img src="images/img09.jpg" /></a></div>
  <div class="item"><a href="#">prop15<br /> <img src="images/img10.jpg" /></a></div>
  <div class="item"><a href="#">prop16<br /> <img src="images/img11.jpg" /></a></div>
  <div class="item"><a href="#">prop17<br /> <img src="images/img12.jpg" /></a></div>
  <div class="item"><a href="#">prop18<br /> <img src="images/img13.jpg" /></a></div>
  <div class="item"><a href="#">prop19<br /> <img src="images/img04.jpg" /></a></div>
  <div class="item"><a href="#">prop20<br /> <img src="images/img05.jpg" /></a></div>
  <div class="item"><a href="#">prop21<br /> <img src="images/img06.jpg" /></a></div>
  <div class="item"><a href="#">prop22<br /> <img src="images/img07.jpg" /></a></div>
  <div class="item"><a href="#">prop23<br /> <img src="images/img09.jpg" /></a></div>
  <div class="item"><a href="#">prop24<br /> <img src="images/img10.jpg" /></a></div>
  <div class="item"><a href="#">prop25<br /> <img src="images/img11.jpg" /></a></div>
  <div class="item"><a href="#">prop26<br /> <img src="images/img12.jpg" /></a></div>
  <div class="item"><a href="#">prop27<br /> <img src="images/img13.jpg" /></a></div>
  <div class="item"><a href="#">prop28<br /> <img src="images/img04.jpg" /></a></div>
</div>

<script type="text/javascript">
$(window).load(function(){
    $(function(){


      var $container = $('#startekContainer'),
          $items = $('.item');

      $container.isotope({
        itemSelector: '.item',
        masonry: {
          columnWidth: 60
        },
        getSortData : {
          selected : function( $item ){
            // sort by selected first, then by original order
            return ($item.hasClass('selected') ? -1000 : 0 ) + $item.index();
          }
        },
        sortBy : 'selected'
      })

      $items.click(function(){
        var $this = $(this);
        // don't proceed if already selected
        var $previousSelected = $('.selected');
        if ( !$this.hasClass('selected') ) {
          $this.addClass('selected');
        }

        $previousSelected.removeClass('selected');

        // update sortData for new items size
        $container
          .isotope( 'updateSortData', $this )
          .isotope( 'updateSortData', $previousSelected )
          .isotope();

      });

    });
});
</script>

</body>
</html>

CSS：

body {
    font-family: Arial;
}

#startekContainer {
    max-width: 1170px;
}

.item {
  width: 270px;
  height: auto;
  background: orange;
  margin: 5px;
  float: left;
}

.item.selected {
  width: 1060px;
  height: 400px;
  background: yellow;
  clear: both;
}

img {
    max-width: 100%;
    height: auto;
}

a {
  color: #000;
  font-size: 20px;
  padding: 20px;
}

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
          transition-duration: 0s;
}

这是一个显示我的问题的{jsfiddle} http://jsfiddle.net/philiplocke/h88L1nd2/ 如果有人想播放/编辑它......

2 个答案:

答案 0 :(得分：2)

我做了一些调整：

First: 

$items = $('.item a');

Second: 

$items.click(function(){
    var $this = $(this).parent();

工作小提琴：http://jsfiddle.net/robertrozas/8t6ejaqq/

更新：正在上课bla：http://jsfiddle.net/robertrozas/comzv3q4/3/

更新2：http://jsfiddle.net/robertrozas/comzv3q4/7/

答案 1 :(得分：0)

尝试在通话前添加以下内容＆＃34; $ items.click＆＃34;：

        $('.item img').css('cursor', 'default').click(function(e) {
            e.stopPropagation();
        });
        $items.click(function(){

再见

相关问题
最新问题