顯示數組中的特定項目？

基本上我有兩個專欄坐在一起。一個擁有我的投資組合件的縮略圖。我希望能夠點擊縮略圖，然後在div上顯示特定的內容。顯示數組中的特定項目？

我的理論是，內容可以存儲在一個數組中，每個縮略圖可以有一個ID，它將對應於其內容在數組中的位置。因此，第一個縮略圖的ID將爲0等等。

但我一直在圈子裏，並沒有得到任何代碼。用正確的方向指點我的例子？

這是我到目前爲止，但它根本不工作。即使帶有變量的警報框。

<script type="text/javascript"> 
    var arr = ["item zero", "item one", "item two", "item three"]; 

$("div").click(function(){ 
    var thing = $(this).attr("id"); 
    $(#description).document.write(arr[thing]); 
} 
</script> 
</head> 
<body> 

<div class="port" id="15">stuff and things </div> 
<div id="description"> </div> 
<script> document.write("hey " + thing); </script> 

</body> 
</html>

來源

2015-07-05 Pauline Orr

能否請您發表你試過到目前爲止代碼？沒有看到任何代碼，我們不能真正幫助，因爲我們不知道你可能出錯的地方。請記住，我們在這裏幫助您解決您試圖解決的問題。如果不展示問題和嘗試解決方案，那麼本質上我們只是爲您免費編寫代碼。 –

錯字：在最後一個'}之後，你錯過了'）;'。避免使用'.document.write'來使用其他方法來代替HTML或內容。 –

最簡單的方法（沒有使用ID和東西）將在圖像後面隱藏一個元素，並在其中描述圖像。
比使用jQuery採取.next()（所點擊的圖片）元素的文本
並填充指定的目標元素：

$("#portfolio img").click(function(){ 
 
    $("#js_Description").html($(this).next().html()); 
 
});

#portfolio, 
 
#js_Description{ 
 
    display:inline-block; 
 
    width:204px; 
 
    height:204px; 
 
    padding:15px; 
 
    background:#ccc; 
 
    vertical-align:top; 
 
} 
 
#portfolio div{ 
 
    display:none; /* hide descriptions! */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="portfolio"> 
 
    <img src="http://placehold.it/100x100/8f8"> 
 
    <div>LIGHTGREEN</div> 
 
    <img src="http://placehold.it/100x100/fa0"> 
 
    <div>ORANGE! Yumm</div> 
 
    <img src="http://placehold.it/100x100/ff8"> 
 
    <div>LEMON</div> 
 
    <img src="http://placehold.it/100x100/8ff"> 
 
    <div>That's it...</div> 
 
    </div> 
 
    
 
    <div id="js_Description"></div>

來源

2015-07-05 00:43:55

如果你不喜歡jQuery，JavaScript'.nextElementSibling'應該適合你。 – www139

@ www139是的，但還有更多的你知道...而且問題也被標記爲jQuery所以... –

我同意你的判斷。我只是覺得值得一提。 – www139

顯示數組中的特定項目？

回答

相關問題