Question

我正在尝试将大量JavaScript转换为jQuery，我有一个任务，我相信它有一个简单的jQuery快捷方式，但我不知道它是什么，我无法找到一个例子。< / p>

我有一个包含许多切换div的页面。它们的形式如下：###是每对的唯一整数。

func logm(items: Any..., file: String = #file, line: Int = #line, function: String = #function) {
    if let f = file.componentsSeparatedByString("/").last {
        print("[\(f)][\(function)][\(line)]:", items)
    } else {
        print("[\(function)][\(line)]: ", items)
    }
}

我认为快捷方式类似于：

<button class='togglebutton' onclick="toggle('div###');">+</button>
<div id='div###'>...some text...</div>

我的理论......如果我给每个按钮一个id，例如'button ###'，那么我可以使用substring来获取'button'之后的值，如：

$('.togglebutton').onclick(function() {
    var divid = '#div'+?????;
    $(divid).toggle();
});

显然，这不起作用。所以，我想我应该问一下jQuery中是否有一个简单的快捷方式来将showhide按钮与一个单独的div配对。

Answer 1

无论您的div位于何处http://jsfiddle.net/tg5op333/25/，您都可以这样做 HTML

{
  cards: { ... },
  categories: { ... },
  filter: 'SHOW_ALL',
  allCardsList: { ... }
}

JS：

    <button class='togglebutton' data-id="1">+</button>
    <div id='1' style="display:none">...some text...</div>
    <button class='togglebutton' data-id="2">+</button>
    <div id='2' style="display:none">...some text...</div>
    <button class='togglebutton' data-id="3">+</button>
    <div id='3' style="display:none">...some text...</div>
    <button class='togglebutton' data-id="4">+</button>
    <div id='4' style="display:none">...some text...</div>

Answer 2

如果按照您在问题中显示的方式订购HTML，请使用：

$('.togglebutton').click(function() {
    $(this).next().toggle();
});

＆＃13;

$('.togglebutton').click(function() {
  $(this).next().toggle();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class='togglebutton'>+</button>
<div id='div1'>...some text...</div>
<button class='togglebutton'>+</button>
<div id='div2'>...some text...</div>
<button class='togglebutton'>+</button>
<div id='div3'>...some text...</div>

＆＃13;

Answer 3

两种方式：

1）您可以对所有潜水使用一些常见的类属性，并使用该选项全部选择。

或者

2）否则你可以使用这个通配符选择器：

$("[id^=div]")

它为你提供了id以div开头的所有div。

jquery多个显示/隐藏按钮

3 个答案: