使用数据属性在过滤上创建其他div

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筛选投资组合，该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是由我现在添加到jQuery下面的一些PHP生成的。 结果我无法直接访问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> http://jsfiddle.net/27NUD/1/

因此，span text =关联数组键。 数组保存div的内容。 Div是在jquery块内创建的，因此不需要html操作。 （请注意：#container div =“标题/说明” div / box的容器）。