-2

I know there are a lot of these threads but none seem to really fit me.

I have 5 dives with text like "this is div1, to div5". These are always gonna be shown. And i have 5 hidden divs with text belonging to each div, that are gonna show if i click on my shown divs.

If I click div1, i want to show the hidden div1.

Right now I'm using a click function(jQuery) for every div which works but doesn't look very good in code. There has to be a better way. Any advise?

I do NOT want any of the divs to be hyperlinks, which seem to be the solution on a lot of similar threads on here.

EDIT: This is my current code.(can't get jsfiddle to work)

html

<div class="showing_div">
<p>This is a showing div</p>
</div>
<div class="hidden_div" style="display: none;>
<p>This div is hidden</p>
</div>

Jquery

$('showing_div').click(function() {

$('hidden_div').toggle();   

})
4

3 に答える 3

0

@Roko C. Buljanがうまく示したように、それには多くの方法があります。

これは、私が通常.data() jQuery 関数を使用して行う方法です。

<div class="clickable" data-hidden="d1">CLICK 1</div>
<div id="d1" class="hidden">text 1</div>
<div class="clickable" data-hidden="d2">CLICK 2</div>
<div id="d2" class="hidden">text 2</div>


$(".clickable").click(function() {
    $("#" + $(this).data("hidden")).toggle();  
});

このように、DOM 要素をどのように編成するかは問題ではありません。idすべてのデータ非表示属性で権利を特定することだけを気にする必要があります。

ワーキングデモ

于 2013-08-22T17:24:54.873 に答える
0 
$('div').click(function() {
    var text = $(this).text();
    $('#'+text).show();
});

フィドルのデモ

于 2013-08-22T16:57:00.070 に答える