Question

嗨:)希望有人能帮助我。

我创建了一个jQuery行来切换div（显示/隐藏），它正在工作。

但是现在我需要使用相同的HTML结构，比如8X。我试图将$（this）添加到我的代码中，但我没有成功。你能告诉我吗？

HTML代码：（触发）

<span class="go-span go-left go-button-display">View more <i class="fa fa-caret-down" aria-hidden="true"></i></span>

（div显示/隐藏）

 <div id="go-AR-table" class="go-monthly-data go-menu-hide"> Some text</div>

jQuery代码：

$(".go-button-display").click(function(){
        $("#go-AR-table").toggle();
    });

Answer 1

编辑：在与@RicardoZorzo讨论之后，我做了一个切换助手：

$('[data-tggl]').on('click', function(){
  $($(this).data('tggl')).toggle();
})

<i data-tggl="any-css-selector">
   Use on any tag, not just i
</i>

笑着说：

＆＃13;

$('[data-tggl]').on('click', function(){
  $($(this).data('tggl')).toggle();
})

＆＃13;

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}
.well, .well * {
  display: none;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<span class="btn-group">
  <span class="btn btn-default one" data-tggl=".two">tggl: .two</span>
  <span class="btn btn-primary two" data-tggl=".four">tggl: .four</span>
  <span class="btn btn-info three" data-tggl=".two">tggl: .two</span>
  <span class="btn btn-warning four" data-tggl=".btn:not(.four)">tggl: .btn:not(.four)</span>
  <span class="btn btn-danger" data-tggl="*:not(body,html,.btn-group)">¯\_(ツ)_/¯</span>
</span>

<div class="well">
<button class="btn-large" data-tggl="*:not(body,html,.btn-group)">I knew you'd press it! Press again...</button>
<br />As you can see, it's easy to mess up with this toy... Use wisely!
</div>

＆＃13;

初步回答：如您所见，您的代码有效：

＆＃13;

$(".go-button-display").click(function(){
        $("#go-AR-table").toggle();
    });

＆＃13;

#go-AR-table {display: none;}

body {display: flex;flex-direction:column;align-items:center;
justify-content:center; min-height: 50vh;}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="go-span go-left go-button-display">View more <i class="fa fa-caret-down" aria-hidden="true"></i></span>
<div id="go-AR-table" class="go-monthly-data go-menu-hide"> Some text</div>

＆＃13;

有多种情况可能不适合你，其中最常见的是：

在display:none !important

CSS

未在jQuery

bootstrap.js

未加载tether.js。
您的网页中有多个具有相同#id的元素...

如果以上都没有帮助，请创建一个我们可以检查的最小，完整且可验证的示例。

Answer 2

如果你遵循这个结构，一个非常简单的方法是：

$(".go-button-display").click(function(){
        $(this).next().toggle();
    });

Answer 3

听起来你只想使用单击功能控制同一事物的切换，但让它适用于8个不同的控件，它们将切换相应的元素。我能想到的最简单的方法是为每个元素（在这种情况下为<div>）分配一个ID，并使用data-target属性指向要为每个控件切换的相应元素。换句话说，使用您的示例，您已经拥有#go-AR-table元素，因此我们将向其切换控制器添加一个属性，因此相应的<span>将如下所示：

<span class="go-span go-left go-button-display" data-target="go-AR-table">Toggle AR Table<i class="fa fa-caret-down" aria-hidden="true"></i></span>

然后，您可以使用一个函数来处理所有元素：

$(".go-button-display").click(function(){
  $('#' + $(this).data('target')).toggle();
});

所以，对于两个元素，它看起来像这样 - 你可以计算剩下的8个元素而不是两个：

<span class="go-span go-left go-button-display" data-target="go-AR-table">Toggle AR Table<i class="fa fa-caret-down" aria-hidden="true"></i></span>

<div id="go-AR-table" class="go-monthly-data go-menu-hide">AR Table</div>

<span class="go-span go-left go-button-display" data-target="go-AP-table">Toggle AP Table<i class="fa fa-caret-down" aria-hidden="true"></i></span>

<div id="go-AP-table" class="go-monthly-data go-menu-hide">AP Table</div>

https://jsfiddle.net/45g4fzn0/

如何创建一个函数来仅切换单击的项目？

3 个答案: