Question

我正在尝试使用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>

Answer 1

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

首先，您需要将您的调用包装在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尚未呈现，因此它不知道您在说什么。另请注意，ready事件处理程序的构造几乎与click事件处理程序相同。您只是在不同的对象上操作并使用不同的事件。

下一个问题是你似乎在努力应对选择器的工作方式。

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

您实际上在这里使用两个选择器。 $（）和.find（）几乎完全相同。然而，jQuery对象选择器用于查询整个文档，find用于查询子集。所以对于你想要做的事情，这会更合适：

var buttons = $("a");

这只是说“选择所有锚标签”。当选择器不以特殊字符开头时，它只是查找该类型的标签。＃字符查询具有id和的所有元素。 character查询该类的所有元素。因此，您的第一个语句实际上是查询任何ID为“按钮”且不存在的元素。

最后，你不需要为你想要的东西创建一个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>

那应该这样做！

Answer 2

您的代码中有多个错误，重新编写的版本如下：

演示：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>

Answer 3

您需要将代码包装在document.ready函数中。并且没有属性函数这样的东西，它是attr（）。此外，您正在选择ID为Id的页面，在引用div后需要＃符号和ID，但您需要这样说，否则jquery会查找名为id的HTML元素，该元素不存在。< / p>

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

见工作fiddle here

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

    buttons.click(function(){
            var id = $(this).attr("id");
                $("#pages div").hide();
                $("#pages div:eq("+id+")").show();
        });

Answer 4

您正在调用$("buttons") - 正在尝试查找名为<buttons>的标记，该标记当然不存在。您已经预先计算了链接数组，因此您只需要调用：

buttons.click(function() { ...

使用按钮更改div中的内容

4 个答案: