向jquery过滤器中添加div

Question

我对Jquery还很陌生&我已经为我的网站创建了以下过滤器，接下来我要做的是，当有人点击一个选项，例如photoshop，我如何应用以下div -

<span id="all" class="label label-primary">photoshop</span>

然后，如果他们点击另一个选项，例如，我需要删除photoshop中的div，并将其全部放在上面。

$("#all").click(function(){
    $(".webdesign").show();
    $(".photoshop").show();
    $(".games").show();
})
$("#webdesign").click(function(){
    $(".webd").show();
    $(".photoshop").hide();
    $(".games").hide();
})
$("#photoshop").click(function(){
    $(".webd").hide();
    $(".photoshop").show();
    $(".games").hide();
})
$("#games").click(function(){
    $(".webd").hide();
    $(".photoshop").hide();
    $(".games").show();
})

Answer 1

这是一个小提琴

这是HTML

<div class="labels">
  <span id="all" class="label active">All</span>
  <span id="photoshop" class="label">Photoshop</span>
  <span id="games" class="label">Games</span>
</div>

<div id="container">
  <div class="photoshop"></div>
  <div class="games"></div>
  <div class="photoshop"></div>
  <div class="games"></div>
  <div class="photoshop"></div>
  <div class="games"></div>
</div>

CSS

.label.active {
  background-color: #4EB478;
  font-size: 14px;
  color: #fff;
}

.label {
  cursor: pointer;
  display: inline-block;
  padding: .25em .6em;
  font-weight: 500;
  line-height: 1;
  color: #4EB478;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
  margin-bottom: 10px;
}

.container {
  display: block;
}

.photoshop {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #321;
}

.games {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: #789;
}

和JavaScript

$("#all").click(function(){
  $("#container div").show();
})
$("#webdesign").click(function(){
  $(this).siblings().removeClass("active");
  $(this).addClass('active');
  $("#container div").hide();
  $('.webd').show();
})
$("#photoshop").click(function(){
  $(this).siblings().removeClass("active");
  $(this).addClass('active');
  $("#container div").hide();
  $('.photoshop').show();
})
$("#games").click(function(){
  $(this).siblings().removeClass("active");
  $(this).addClass('active');
  $("#container div").hide();
  $('.games').show();
})

Answer 2

如果你所缺少的只是亮点，你可以尝试像这样的东西(合并到你得到的)。

$(".filter > li").click(function(){
    $(this).siblings().removeClass("active");
    $(this).addClass("active");
});

在@Graham的演示中添加这样的内容：http://jsfiddle.net/38sYd/1/

Answer 3

取决于您想如何放置您的span。你可以做任何一种方法：

var html = "<span id="all" class="label label-primary">photoshop</span>";
$("#someid").on('click', function(){
 //stuff
 $(this).append(html);
 //or
 //$(html).insertAfter($(this));
});

如果您想删除使用

$("#someid").on('click',function(){
 if($("#all").length > 1){ //lets check if the span exist 
   $("#all").remove();
 }
//then append or insertafter
});