使用按钮更改div中的内容 [英] Change content in a div using button
问题描述
我正在尝试创建三个按钮来使用jQuery更改div内的内容.
I am trying to create three buttons that change the content inside of a div using jQuery.
我不确定这段代码有什么问题.
I'm not sure whats wrong with this code.
<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>
推荐答案
您似乎有一些误解需要解决. 别担心您显然在正确的轨道上.
It looks like you've got a few misconceptions that need clearing up. Don't worry you're clearly on the right track.
首先，您需要像这样将呼叫包装在document.ready事件中.
First, you need to wrap your call inside a document.ready event like so.
<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时，尚未呈现，因此您不知道您在说什么.还要注意，就绪事件处理程序的构造几乎与单击事件处理程序相同.您只是在对其他对象进行操作并使用不同的事件.
The reason for this is because your HTML is rendered sequentially, that is, it reads it line by line. When your javascript code executes the HTML for the buttons hasn't been rendered yet so it has no idea what you are talking about. Also notice that the ready event handler is constructed almost identically to the click event handler. You're just operating on a different object and using a different event.
下一个问题是您似乎在为选择器的工作方式而苦苦挣扎.
Next issue is that you seem to be struggling with how selectors work.
var buttons = $("#buttons").find("a");
您实际上是在这里使用两个选择器. $()和.find()几乎做同样的事情.但是，jQuery对象选择器用于查询整个文档，而find用于查询子集.因此，对于您尝试执行的操作，它会更合适:
You're actually using two selectors here. $() and .find() do almost the same exact thing. The jQuery object selector however is used to query the entire document and find is used to query a subset. So for what you're trying to do this would be more appropriate:
var buttons = $("a");
这只是说选择所有锚标签".当选择不以特殊字符它只是在寻找这种类型的标签开始. #字符查询所有具有id和的元素.字符查询该类的所有元素.因此，您的第一条语句实际上是查询ID为"buttons"不存在的所有元素.
This simply says "select all anchor tags". When a selector does not start with a special character it is simply looking for tags of that type. The # character queries all elements with the id and the . character queries all elements of that class. So your first statement was actually querying for any elements with the id "buttons" which don't exist.
最后，出于简单起见，您不需要为要创建的变量创建var，我们将摆脱该行，然后继续单击处理程序.
Lastly you don't need to create a var for what you're trying to do so for simplicity's sake we'll just get rid of that line and move on to the click handler.
<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-"开头的自定义属性.因此，在这种情况下，请更改周围的锚标签.
The next issue is that you're using the ID attribute as a data field. Don't do this. If you need to store information about an element within it's tag use a custom attribute starting with the prefix "data-". So in this case lets change your anchor tags around.
<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给divs类.
That's a little better. Now we've got the same issue on the divs. We could do the same thing but since we're going to be querying this information and using selectors on classes is much easier let's just give the divs classes according to the id.
<div id="pages">
<div class="mydivshow div1">1111</div>
<div class="mydivhide div2">2222</div>
<div class="mydivhide div3">3333</div>
</div>
现在，我们可以回到jQuery并更改代码.
Now we can get back to the jQuery and change the code.
<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>
那应该做到！
这篇关于使用按钮更改div中的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
