Question

单击文本菜单时，照片fadeIn和标题也将FadeIn放在一个单独的位置。我无法整合标题。如果有更好的方法，我将非常感谢你的帮助。

$(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>

Answer 1

你有很多逻辑缺失，缺少# ID选择器，而且你抓住了想要由.attr('class')显示的div，但是没有用空格将它们拆分并选择它们。

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
    }
});

可能有任何改进，但是jist在那里并且它正在工作！

Answer 2

有些事情，我认为你使用了太多的ID。这可以通过类更好地控制。如果你想一次做多件事，那就是一个类存在的原因（有点）。使用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
    });
});

这可能是一种稍微有效的方法，但效果很好。

<强>更新我意识到我创建了隐藏类并且没有解释它。首先，这取决于您是否要隐藏父div [{1}}和#photos。这取决于你使用它们的原因。如果您不需要隐藏这些div本身以及其中的所有内容，则可以从#photo-titles调用以及行#photos, #photo-titles中删除hide()，因为父母将始终显示。然后你可以隐藏$("." + c).parent().show();类。

jQuery单击链接以同时在两个位置显示带有div标题的var div图像

2 个答案: