如何將存儲的索引應用到另一個div？

我在這裏有一個以下問題：在我的html結構中，我得到了一些div，它們最初是隱藏的。我想要做的是這樣的：點擊一個段落標記存儲它的索引並將相同的索引應用於隱藏的div（女巫也與「clicked」p標記具有相同的索引）。
例如：當我點擊SHOW RED DIV'段'顯示隱藏的div （帶紅色的div）與點擊p標記具有相同索引。我的代碼無法正常工作，因爲它顯示所有隱藏的div的。因爲我不知道如何應用存儲指數:( 我希望有人能幫助我... THX！

這裏的Fiddle

這是我得到了什麼至今：如何將存儲的索引應用到另一個div？

<html> 
<head> 
<style type="text/css"> 
div{width:100px;height:100px;display:none;} 
.red{background-color:red;} 
.blue{background-color:blue;} 
.green{background-color:green;} 
</style> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("p").click(function(){ 
    var index=$(this).index(this); 
    $('div').data('index',index).show('slow'); 
    }); 
}); 
</script> 
</head> 
<body> 
<div class="red"></div> 
<div class="blue"></div> 
<div class="green"></div> 
<span> 
<p>SHOW RED DIV</p> 
<p>SHOW BLUE DIV</p> 
<p>SHOW GREEN DIV</p> 
</span> 
</body> 
</html>

來源

2012-05-06 Dejo Dekic

謝謝你們！ –

使用此代碼：

$(document).ready(function() { 
    $("p").click(function() { 
     var index = $(this).index(); 
     $('div:eq(' + index + ')').show('slow'); 
    }); 
});

DEMO：http://jsfiddle.net/Q96Uj/

來源

2012-05-06 15:51:44 VisioN

$(document).ready(function(){ 
    $("p").click(function(){ 
    var index=$(this).index(); 
     $('div:eq('+ index +')').show('slow'); 
    }); 
});

檢查DEMO

來源

2012-05-06 15:52:48 thecodeparadox

爲什麼downvote？請評論 – thecodeparadox

沒有downvote，但鏈接是在SO無效的答案。將代碼複製到您的答案，並希望downvoter將恢復它。 – gdoron

@gdoron謝謝。 – thecodeparadox

$(document).ready(function() { 
    $("p").click(function() { 
     var index = $(this).index(); 
     $('div').eq(index).show('slow'); 
    }); 
});

Live DEMO

來源

2012-05-06 15:53:38 gdoron

哇，這裏有些混亂。 index是元素相對於其兄弟的索引。你試圖通過data查找索引是你定義和連接到內容如下任意索引：

<div class="red" data-index="red"></div> 
<p data-index="red">SHOW RED DIV</p>

Vision的答案提供了訪問使用index()功能元件的正確的方式，但對於你的應用程序聽起來像你可能更喜歡使用用戶定義的索引。如果是這樣的話，你的JavaScript將是這個樣子：

$(document).ready(function(){ 
    $("p").click(function(){ 
    var index=$(this).data('index'); 
    $('div[data-index=' + index + ']').show('slow'); 
    }); 
});

來源

2012-05-06 15:54:04 rjz

如何將存儲的索引應用到另一個div？

回答

相關問題