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

Question

我正在尝试实现此效果，但我确定编码不正确。我希望图像 DIV 在单击每个按钮时交换内容。这是我到目前为止所拥有的，但我确定代码不正确。有没有更好的方法来实现这一目标？谢谢，请原谅我的菜鸟问题。

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> .这是 split 头发，会给你数字而不是要点，给你更多的工作来正确地设计它。但值得一提。
4. 考虑给出一些指示，表明列表项是交互式的。您可以将它们设为按钮或 anchor (这样它们就会像超链接一样显示)。或者为光标尝试一个 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();
});

但如您所知，您的代码功能完备。您没有做错任何大错(干得好!)，这些只是一些可以让您或您的用户更轻松地访问此页面的事情。