Question

我是Jquery＆amp;的新手。我已经在月球上为我的网站创建了以下过滤器，我接下来要做的是当有人点击一个选项，例如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

这是jsfiddle

这是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
});

将div添加到jquery过滤器

3 个答案: