0

テキスト メニューをクリックすると、写真のフェードインとタイトルも別の場所にフェードインされます。タイトルの統合に問題があります。これを行うためのより良い方法があれば、助けていただければ幸いです。

デモ: http://jsfiddle.net/Tacbs/4/

$(document).ready(function() {
$("div#photos, div#photo-titles").hide();
var divs = $("#Photo1, Photo1-Title, #Photo2,  Photo2-Title, #Photo3, Photo3-Title,");
$("li a").click(function () {
$(divs).hide();
$("#" + $(this).attr("class")).fadeIn();
});
});​

#photo-titles {
margin-top: 0;
}
#photos {
margin-top: 100px;
}
#photo-titles {
margin-top: 200px;
}​

<div id="photo-links">
<ul>
<li><a href="#" class="Photo1 Photo1-Title">Photo 1 Button</a></li>
<li><a href="#" class="Photo2 Photo2-Title">Photo 2 Button</a></li>
<li><a href="#" class="Photo3 Photo3-Title">Photo 2 Button</a></li>
</ul>
</div>

<div id="photos">
<div id="Photo1"><img src="Photo1.jpg"/></div>
<div id="Photo2"><img src="Photo1.jpg"/></div>
<div id="Photo3"><img src="Photo1.jpg"/></div>
</div>

<div id="photo-titles"> // text
<div id="Photo1-Title">Photo Title 1</div>
<div id="Photo2-Title">Photo Title 2</div>
<div id="Photo3-Title">Photo Title 3</div>
</div>​
4

2 に答える 2

1

いくつか、IDを使いすぎていると思います。これは、クラスを使用するとはるかに適切に制御されます。一度に複数のことを行おうとしているのであれば、それがクラスが存在する理由です（一種の）。IDを使用すると、それぞれを分離する必要があります。そこで、いくつかのIDをクラスに変更して、うまく機能させました。

HTML

<div id="photo-links">
<ul>
<li><a href="#" class="Photo1">Photo 1 Button</a></li>
<li><a href="#" class="Photo2">Photo 2 Button</a></li>
<li><a href="#" class="Photo3">Photo 3 Button</a></li>
</ul>
</div>

<div id="photos">
<div class="Photo1 hide"><img src="Photo1.jpg"/></div>
<div class="Photo2 hide"><img src="Photo1.jpg"/></div>
<div class="Photo3 hide"><img src="Photo1.jpg"/></div>
</div>

<div id="photo-titles">
<div class="Photo1 hide">Photo Title 1</div>
<div class="Photo2 hide">Photo Title 2</div>
<div class="Photo3 hide">Photo Title 3</div>
</div>​

JS $（document）.ready（function（）{

$("#photos, #photo-titles, .hide").hide();


$("li a").click(function () {
    $("#photos, #photo-titles, .hide").hide(); // Hide everything every time
    var c = $(this).attr('class').split(' ')[0]; // Get first class of link
    $("." + c).parent().show(); // Show the parent div
    $("." + c).fadeIn(); // Show the object you want to show
    });
});​

これを行うにはおそらくもう少し効率的な方法がありますが、うまく機能します。

更新 私はその非表示クラスを作成したことに気づき、それを説明しませんでした。#photosまず、親divとを非表示にするかどうかによって異なります#photo-titles。それはあなたがそれらを何のために使っているかに依存します。それらのdiv自体を非表示にする必要がなく、その中のすべてを非表示にする必要がある場合は、親が常に表示されるため、呼び出しと行#photos, #photo-titlesからを削除できます。そして、クラスを非表示にすることができます。hide()$("." + c).parent().show();.hide

于 2012-11-27T18:09:42.853 に答える
1

多くのロジックが欠落しており、#ID セレクターが欠落しており、また、表示したい div を取得していました.attr('class')が、それらをスペースで分割して選択していませんでした。

http://jsfiddle.net/6krwX/

$("div#photos, div#photo-titles").hide();

// you were missing # ID selector for some selectors here
var divs = $("#Photo1, #Photo1-Title, #Photo2,  #Photo2-Title, #Photo3, #Photo3-Title");

$("li a").click(function () {

    $(divs).hide();
    $('#photos, div#photo-titles').show(); // show the areas

    var locations = $(this).attr('class').split(' '); // split the classes up

    for (i = 0; i < locations.length; i++) {
        $("#" + locations[i]).show(); // show photo & title
    }
});

どちらかの改善が行われた可能性がありますが、ジストはそこにあり、機能しています!

于 2012-11-27T17:53:39.427 に答える