用按钮单击更改单独的div中的信息

Question

我正在尝试完成此效果，但我确定编码不正确。我希望图像DIV s在每个按钮被点击时交换内容。这是我迄今为止，但我敢肯定代码是不正确的。有没有更好的方法来实现这一点？谢谢，原谅我的noob问题。

HTML：

<div class="item-1 content-item"> 
    I am the 1st image content 
</div> 

<div class="item-2 content-item" style="display: none;"> 
    I am the 2nd image content 
</div> 

<div class="item-3 content-item" style="display: none;"> 
    I am the 3rd image content 
</div> 

<div class="item-1 content-item"> 
    I am the content for item 1 
</div> 

<div class="item-2 content-item" style="display: none;"> 
    I am the content for item 2 
</div> 

<div class="item-3 content-item" style="display: none;"> 
    I am the content for item 3 
</div> 

<ul> 
    <li class="change-item" data-item="1">Item 1</li> 
    <li class="change-item" data-item="2">Item 2</li> 
    <li class="change-item" data-item="3">Item 3</li> 
</ul> 

的jQuery：

$('.change-item').click(function(){ 
    var this_item = $(this).attr("data-item"); 
    $('.content-item').hide(); 
    $('.item-' + this_item).fadeIn(); 
}); 

Answer 1

你可能会发现有用的，即使它是工作的罚款一对夫妇的提示。

1. 由于您的物品实际上是按编号分组的，而其中的物品是隐藏的，您可以将它们组合在一起。
2. 你应该考虑在你的标记中使用id属性。这使得它更清楚地表明你的每个项目都是独一无二的，并使JavaScript运行得更快。
3. 您的<ul>在技术上是按顺序排列的，所以它更适合于<ol>。这是分裂的头发，并会给你数字而不是项目符号点，给你更多的工作，以正确的样式。但值得一提的是。
4. 考虑给出一些表示列表项是交互式的。你可以让它们成为按钮或锚点（所以它们会像超链接一样显示）。或者为光标尝试css规则，以便在用户通过链接时更改鼠标指针。

像这样：

.change-item { 
    cursor: pointer; 
} 

把它放在一起，它可能是这个样子：

HTML：

<div id="item-1" class="content-item"> 
    <img src="/item-1.png"/> 
    <p>I am the content for item 1</p> 
</div> 

<div id="item-2" class="content-item" style="display:none;"> 
    <img src="/item-2.png"/> 
    <p>I am the content for item 2</p> 
</div> 

<div id="item-3" class="content-item" style="display:none;"> 
    <img src="/item-3.png"/> 
    <p>I am the content for item 3</p> 
</div> 

<ol> 
    <li><a href="#" class="change-item" data-item="1">Item 1</a></li> 
    <li><a href="#" class="change-item" data-item="2">Item 2</a></li> 
    <li><a href="#" class="change-item" data-item="3">Item 3</a></li> 
</ol> 

的Javascript：

$('.change-item').click(function(){ 
    var this_item = $(this).attr("data-item"); 
    $('.content-item').hide(); 
    $('#item-' + this_item).fadeIn(); 
}); 

但正如您所看到的，您的代码是完全正常运行的。你没有做任何非常错误的事情（好工作！），这些只是一些可能让你或你的用户更轻松的页面。