Question

我有以下代码

- 在我身边，我的头脑中有以下内容：

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
    $(document).ready(function () {
        $("button").click(function () {
            $("p").toggle();
        });
    });
</script>

这是我的HTML：

<a id="button" href="#">Show/Hide</a>
<div id="item">Item</div>

我如何制作另一个按钮，另一个DIV对前一个按钮点击没有反应

我希望1让第1项消失/可见而我想让2制作第2项Diapear /可见，这怎么可能。

http://jsfiddle.net/BQUyT/211/

Answer 1

ID必须是唯一的
如果您希望多个元素的行为相同，请为其指定class（例如button）。
$('.button').on('click', function() { $(this).next().toggle() });

后者只是说＆＃34;当一个元素带有类＆＃34;按钮＆＃34;单击，切换在DOM＆＃34;

注意：我使用的是.on('click')而不是.click()，因为在我们的编码指南中，我认为.click已被弃用，即使jQuery开发自己也没有。 .click导致混淆，因为它既可以注册处理程序，也可以触发处理程序。相反，我们始终对前者使用显式.on，为后者使用.trigger。

http://jsfiddle.net/alnitak/BQUyT/217/

Answer 2

您可以使用jQuery toggleClass添加和删除隐藏或显示#item div的CSS类。

<强> CSS

#item.hidden {
    display: none;
}

<强> JS

$( "#button" ).on('click', function() {
    $( "#item" ).toggleClass('hidden');
});

更新了jsfiddle here

Answer 3

你的html和脚本中有一些“错误”。

首先，你的html中的id必须是唯一的。请改用类。

<a class="button" href="#">1</a>
<div class="item">Item 1</div>

<a class="button" href="#">2</a>
<div class="item">Item 2</div>

点击后，切换下一个元素

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

检查JSFiddle

Answer 4

您不能多次使用相同的 ID 。相反，您可以使用 CLASS 。 HTML：

<a class="button" href="#">1</a>
<div class="item">Item 1</div>

<a class="button" href="#">2</a>
<div class="item">Item 2</div>

JS:

 $( ".button" ).click(function() {
    var index=$( ".button" ).index( this );
    $('.item').eq(index).toggle();
 });

此处示例：http://jsfiddle.net/BQUyT/221/

Jquery脚本 - 单击按钮使Div显示

4 个答案: