Question

我正在开发一个投资组合网站，我正在尝试将一小部分额外功能纳入其中。我很快就耗尽了我的jQuery技能（在一段令人沮丧的短时间内！）并且想知道是否有人可以对它有所了解。

页面位于：http://www.rodneyfitchassociates.com/specialism/

您将看到一个非常标准的过滤产品组合，它运行以下代码：

 jQuery(function($){
      $(window).load(function() {
          $(".portfolio-filter a").click(function(){
              var selector = $(this).attr("data-filter");
              $(".'. $unique_classname .'").isotope({ filter: selector });
              $(this).parents("ul").find("a").removeClass("active");
              $(this).addClass("active");
              return false;
          });
      });
  });

使用此ul过滤投资组合，触发隐藏/显示效果，具体取决于所选的li：

<ul class="portfolio-filter clearfix">
    <li><a href="#" class="active" data-filter="*"><span>All</span></a></li>
    <li><a href="#" data-filter=".portfolio-branding-specialisms"><span>Branding</span></a></li>
    <li><a href="#" data-filter=".portfolio-consulting"><span>Consulting</span></a></li>           
    <li><a href="#" data-filter=".portfolio-culture"><span>Culture</span></a></li>
    <li><a href="#" data-filter=".portfolio-digital"><span>Digital</span></a></li>
</ul>

我正在尝试创建在选择每个列表项时发生的其他事件。具体来说，我想要一个div，其中包含有关每个元素的其他信息，以显示在DOM中的其他位置。 div可能看起来像这样：

<div class="healthcare">
    <h1>Healthcare Description</h1>
    <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</p>
</div>

非常感谢任何帮助！

*的更新 **

我想我已经过度简化了这个问题。 ul是由一些PHP生成的，我现在已经在jQuery下面添加了。因此，我无法直接访问li项目

$output .='
<script type="text/javascript">
    jQuery(function($){
        $(window).load(function() {
        $(".portfolio-filter a").click(function(){
        var selector = $(this).attr("data-filter");
        $(".'. $unique_classname .'").isotope({ filter: selector });
        $(this).parents("ul").find("a").removeClass("active");
        $(this).addClass("active");
        return false;
        });

    });
});
</script>';

//显示过滤器链接

$output .= '<ul class="portfolio-filter clearfix">';
$output .= '<li><a href="#" class="active" data-filter="*"><span>'. __('All', 'wpex') .'</span></a></li>';
foreach ($terms as $term ) :
$output .= '<li><a href="#" data-filter=".portfolio-'. $term->slug .'"><span>'. $term->name .'</span></a></li>';
endforeach;
$output .= '</ul>';

感谢您的帮助 - 我非常感谢！：d

Answer 1

jQuery的：

$( document ).ready(function() {


var array = {
  branding: ['this is title branding', 'this is branding desc'],
  consulting: ['this is title consulting', 'this is consulting desc'],
  culture: ['this is title culture', 'this is culture desc'],
  digital: ['this is title digital', 'this is digital desc'],
  all: ['this is title all', 'this is all desc'],
}
$(".portfolio-filter a").click(function () {
invisible = '<div class="invisible">  <h1></h1>  <p></p></div>';
var selector = $(this).data('filter');
item_div = $(this).children('span').text().toLowerCase();
title = array[item_div][0];
desc = array[item_div][1];
$('#container .invisible').remove();
$('#container').append(invisible);
$('.invisible h1').text(title);
$('.invisible p').text(desc);
$('.invisible').css('display', 'none');
$('.invisible').fadeIn(1000);
// $(".'. $unique_classname .'").isotope({ filter: selector });
$(this).parents("ul").find("a").removeClass("active");
$(this).addClass("active");
return false;
});
});

的jsfiddle＆GT; http://jsfiddle.net/27NUD/1/

因此，span text =关联数组键。数组包含div（s）内容。 Div是在jquery块内创建的，因此不需要html操作。（注意：#container div ='标题/描述'div / box的容器。）

使用数据attr创建额外的div过滤

1 个答案: