1

我正在尝试创建三个按钮来使用 jQuery 更改 div 内的内容。

我不确定这段代码有什么问题。

<head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</head>

<body>
    <script type="text/javascript">
    var buttons = $("#buttons").find("a");
        $("buttons").click(function() {
           var id = $(this).attribute("id");
           $("pages id").css("display", "none");
           $("pages id:eq("+id+")").css("display", "block");
    });
    </script>​​​​

    <div id="buttons">
         <a href="#" id="0" class="mybutton myred">Div 1</a>
         <a href="#" id="1" class="mybutton myblue">Div 2</a>
         <a href="#" id="2" class="mybutton myblue">Div 3</a>
    </div>

    <div id="pages">
        <div id="1" class="mydivshow">1111</div>
        <div id="2" class="mydivhide">2222</div>
        <div id="3" class="mydivhide">3333</div>
    </div>
</body>

4

4 回答 4

8

看起来你有一些需要澄清的误解。别担心，你显然是在正确的轨道上。

首先，您需要像这样将调用包装在 document.ready 事件中。

<script type="text/javascript">
$(document).ready(function() {
    var buttons = $("#buttons").find("a");
        $("buttons").click(function() {
           var id = $(this).attr("id");
           $("pages id").css("display", "none");
           $("pages id:eq("+id+")").css("display", "block");
    });
});
</script>​​​​

这样做的原因是因为您的 HTML 是按顺序呈现的，也就是说，它会逐行读取它。当您的 javascript 代码执行时，尚未呈现按钮的 HTML，因此它不知道您在说什么。另请注意，就绪事件处理程序的构造几乎与单击事件处理程序相同。您只是对不同的对象进行操作并使用不同的事件。

下一个问题是您似乎在为选择器的工作方式而苦苦挣扎。

var buttons = $("#buttons").find("a");

您实际上在这里使用了两个选择器。$() 和 .find() 做几乎完全相同的事情。然而，jQuery 对象选择器用于查询整个文档，而 find 用于查询子集。因此，对于您要尝试执行的操作，这将更合适：

var buttons = $("a");

这只是说“选择所有锚标签”。When a selector does not start with a special character it is simply looking for tags of that type. # 字符查询所有具有 id 和 . character 查询该类的所有元素。因此，您的第一条语句实际上是在查询 ID 为“buttons”且不存在的任何元素。

最后，你不需要为你想要做的事情创建一个 var ，为了简单起见，我们将摆脱那条线并继续点击处理程序。

<script type="text/javascript">
$(document).ready(function() {
    $("a").click(function() {
       var id = $(this).attribute("id");
       $("pages id").css("display", "none");
       $("pages id:eq("+id+")").css("display", "block");
    });
});
</script>​​​​

下一个问题是您将 ID 属性用作数据字段。不要这样做。如果您需要在其标签中存储有关元素的信息，请使用以前缀“data-”开头的自定义属性。所以在这种情况下，让我们改变你的锚标签。

<div id="buttons">
     <a href="#" data-id="0" class="mybutton myred">Div 1</a>
     <a href="#" data-id="1" class="mybutton myblue">Div 2</a>
     <a href="#" data-id="2" class="mybutton myblue">Div 3</a>
</div>

这样好一点。现在我们在 div 上遇到了同样的问题。我们可以做同样的事情，但是因为我们要查询这些信息并且在类上使用选择器要容易得多，所以我们只根据 id 给 div 类。

<div id="pages">
    <div class="mydivshow div1">1111</div>
    <div class="mydivhide div2">2222</div>
    <div class="mydivhide div3">3333</div>
</div>

现在我们可以回到 jQuery 并更改代码。

<script type="text/javascript">
$(document).ready(function() {
    $("a").click(function() {
       var id = $(this).attribute("data-id"); // Using a custom attribute.
       $("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
       $(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
    });
});
</script>​​​​

那应该这样做！

于 2012-09-14T00:23:23.253 回答
4

您的代码中有多个错误，修改后的版本如下：

演示：http: //jsfiddle.net/SO_AMK/BcFVv/

jQuery：

$("#buttons a").click(function() {
    var id = $(this).attr("id");
    $("#pages div").css("display", "none");
    $("#pages div#" + id + "").css("display", "block");
});​

HTML：

<div id="buttons">
    <a href="#" id="1" class="mybutton myred">Div 1</a>
    <a href="#" id="2" class="mybutton myblue">Div 2</a>
    <a href="#" id="3" class="mybutton myblue">Div 3</a>
</div>
<div id="pages">
    <div id="1" class="mydivshow">1111</div>
    <div id="2" class="mydivhide">2222</div>
    <div id="3" class="mydivhide">3333</div>
</div>

​</p>

于 2012-09-14T00:04:58.510 回答
3

您需要将代码包装在 document.ready 函数中。而且没有属性函数这种东西，就是attr()。此外，您正在选择一个 Id 的页面，您需要 # 符号和它引用 div 之后的 Id，但您需要这样说，否则 jquery 将寻找一个名为 id 的 HTML 元素，该元素不存在。

您可能还想利用 jquery 的隐藏/显示功能而不是所有的 css 代码

在这里查看工作小提琴

 var buttons = $("#buttons a");

    buttons.click(function(){
            var id = $(this).attr("id");
                $("#pages div").hide();
                $("#pages div:eq("+id+")").show();
        });
于 2012-09-14T00:04:11.773 回答
1

你在打电话$("buttons")- 那是试图找到一个名为<buttons>当然不存在的标签。您已经预先计算了链接数组，因此您只需要调用：

buttons.click(function() { ...
于 2012-09-14T00:05:19.773 回答