Question

我有一些html tags我已命名类hidecontent来隐藏元素。在这里，我还有一个元素，如果我单击将触发包含数据的show / hide div元素。

我的数据：

<div class="col-md-4 hidecontent" content="#data_0">Blablablabla</div>
<div class="col-md-4 hidecontent" content="#data_1">Blablablabla</div>
<div class="col-md-4 hidecontent" content="#data_2">Blablablabla</div>
<div class="col-md-4 hidecontent" content="#data_3">Blablablabla</div>
<div class="col-md-4 hidecontent" content="#data_4">Blablablabla</div>
<div class="col-md-4 hidecontent" content="#data_5">Blablablabla</div>
<div class="col-md-4 hidecontent" content="#data_6">Blablablabla</div>
<div class="col-md-4 hidecontent" content="#data_7">Blablablabla</div>
<div class="col-md-4 hidecontent" content="#data_8">Blablablabla</div>

我的链接：

<a href="#" id="data_1">Data 1</a>
<a href="#" id="data_2">Data 2</a>
<a href="#" id="data_3">Data 3</a>

如果我的Data 1链接click将显示数据div，该数据div的ID为only data_0，data_1，data_2，我会使用它，这有多好：

$("div").addClass("hidecontent");
$("div").removeClass("col-md-4 hidecontent").addClass("col-md-4");

然后对于Data 2，我将仅显示来自3-5的数据

然后对于Data 3我将仅显示6-8的数据

我必须一个一个地写吗？或者我可以使用范围？例如，从数据0到2？

由于

Answer 1

为您的div分配班级名称
绑定点击事件并阅读ID
显示/隐藏div class

table2

$(".trigger").on("click", function(e) {
  
  var sourceId = $(this).attr("id");
  var divToToggle = "." + sourceId;
  // console.log( sourceId );
  
  // hide all first
  $(".col-md-4").addClass("hidecontent");
  
  $(divToToggle).removeClass("hidecontent");
  
  // checking is no longer necessary if all is already hidden
  // if ($(divToToggle).hasClass("hidecontent")) {
  //   $(divToToggle).removeClass("hidecontent");
  // }
  // else {
  //   $(divToToggle).addClass("hidecontent");
  // }
  
  e.preventDefault();
});

.hidecontent {
  display: none;
}

Answer 2

简单的解决方案：

            $("a").click(function(){
                var id = $(this).attr("id");
                $("div[content=#" + id + ']').toggleClass("myclass");
            })

Answer 3

这应该是你的伎俩。请注意，不要更改代码的任何部分。

它将计算链接的正确数字，以显示正确的div。

$("a[id^=data_]").click(function() {
  $("div.hidecontent").hide()
  var id = $(this).attr("id").replace("data_","");
  var start = parseInt(id) == 1 ? 0 : (parseInt(id) * 3) - 3;
  var end = parseInt(id) == 0 ? 3 : parseInt(id) * 3;
  $("div.hidecontent").slice(start, end).show();
})

＆＃13;

$("a[id^=data_]").click(function() {
  $("div.hidecontent").hide()
  var id = $(this).attr("id").replace("data_", "");
  var start = parseInt(id) == 1 ? 0 : (parseInt(id) * 3) - 3;
  var end = parseInt(id) == 0 ? 3 : parseInt(id) * 3;
  $("div.hidecontent").slice(start, end).show();
})

＆＃13;

.hidecontent {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4 hidecontent" content="#data_0">Blablablabla</div>
<div class="col-md-4 hidecontent" content="#data_1">Blablablabla</div>
<div class="col-md-4 hidecontent" content="#data_2">Blablablabla</div>
<div class="col-md-4 hidecontent" content="#data_3">Blablablabla</div>
<div class="col-md-4 hidecontent" content="#data_4">Blablablabla</div>
<div class="col-md-4 hidecontent" content="#data_5">Blablablabla</div>
<div class="col-md-4 hidecontent" content="#data_6">Blablablabla</div>
<div class="col-md-4 hidecontent" content="#data_7">Blablablabla</div>
<div class="col-md-4 hidecontent" content="#data_8">Blablablabla</div>


<a href="#" id="data_1">Data 1</a>
<a href="#" id="data_2">Data 2</a>
<a href="#" id="data_3">Data 3</a>

＆＃13;

如何使用jQuery

3 个答案: