用按鈕單擊更改單獨的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(); 
}); 

但正如您所看到的，您的代碼是完全正常運行的。你沒有做任何非常錯誤的事情（好工作！），這些只是一些可能讓你或你的用戶更輕鬆的頁面。