我刚创建了显示/隐藏（切换）HTML块的脚本。有四个按钮，每个按钮可以切换其HTML块。当打开任何HTML块时，但是用户已被单击除HTML块的关联按钮之外的其他按钮...它会隐藏该HTML块并显示新块。
这就是我现在所拥有的：
$('.btn_add_event').click( function() {
$('.block_link, .block_photos, .block_videos').hide();
$('.block_event').toggle();
});
$('.btn_add_link').click( function() {
$('.block_event, .block_photos, .block_videos').hide();
$('.block_link').toggle();
});
$('.btn_add_photos').click( function() {
$('.block_event, .block_link, .block_videos').hide();
$('.block_photos').toggle();
});
$('.btn_add_videos').click( function() {
$('.block_event, .block_link, .block_photos').hide();
$('.block_videos').toggle();
});
如何减少代码大小？此外，此脚本不是很灵活。想象一下，添加两个新按钮和块。
答案 0 :(得分：0)
我一直在阅读“当打开任何HTML块时，但是用户点击了其他按钮而不是那个HTML块的关联按钮”，以为当我的英语不好时，我的眼睛就失败了。
如果您想让它更具动态性，您可以做的是添加一个公共类关键字。然后 当click事件被提升时。你可以让它循环所有具有的类 关键字并将其全部隐藏（当前被点击的除外），然后使用“this”关键字显示当前关键字。
答案 1 :(得分：0)
您可以参考以下链接，
http://chandreshmaheshwari.wordpress.com/2011/05/24/show-hide-div-content-using-jquery/
调用function showSlidingDiv() onclick事件并动态传递您的按钮类。
这可能很有用。
感谢。
答案 2 :(得分：0)
试试这个
$('input[type=button]').click( function() {
$('div[class^=block]').hide(); // I resumed html block is div
$(this).toggle();
});
答案 3 :(得分：0)
不幸的是，我无法测试它，但是如果我能记住正确的下面应该工作：
function toogleFunc(clickObject, toogleTarget, hideTarget)
{
$(clickObject).click(function()
{
$(hideTarget).hide();
$(toogleTarget).toggle();
});
}
电话：
toogleFunc(
".btn_add_videos",
".block_videos",
".block_event, .block_link, .block_photos"
);
到目前为止
答案 4 :(得分：0)
$('.myAddButtonClass').click( function() {
$('.mySharedBlockClass').filter(':visible').hide();
//find a good way to 'traverse' to your desired block, or name it specifically for now.
//$(this).closest(".mySharedBlockClass").show() complete guess
$('.specificBlockClass').show();
});
答案 5 :(得分：0)
假设按钮每个只有一个类，这样的东西应该可以工作。
var classNames = [ 'btn_add_event', 'block_link', 'block_photos', 'block_videos' ];
var all = '.' + classNames.join(', .'); // generate a jquery format string for selection
$(all).click( function() {
var j = classNames.length;
while(j--){
if( this.className === classNames[j] ){
var others = classNames.splice(j, 1); // should leave all classes but the one on this button
$('.' + others.join(', .')).hide();
$('.' + classNames[j]).toggle();
}
}
}
所有按钮都具有相同的处理程序。当处理程序触发时，它会检查发件人是否有列表中的某个类。如果找到一个类，它会从剩余的类中生成一个jquery选择字符串并隐藏它们，并切换找到的那个。您可能需要进行一些检查以确保字符串正确生成。
答案 6 :(得分：0)
这取决于HTML的结构。
假设你有类似的东西
<div class="area">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
...
<div class="sender">
<a class="one"></a>
<a class="two"></a>
<a class="three"></a>
</div>
您有一个由发件人和目标共享的类。
你的js会是这样的：
$('.sender > a').click(function() {
var target = $(this).attr('class');
$('.area > .' + target).show().siblings().hide();
});
你展示你的真实目标并隐藏其不需要的兄弟姐妹。
答案 7 :(得分：0)
如果将类后缀放在数组中，则可以轻松地使此代码更具动态性。此代码假定调用切换或隐藏的顺序无关紧要。如果它确实重要，你可以记住（内部）循环中的正确类名，并在循环之后切换该类。
这种方法的优点是你可以使用exta类扩展数组，而无需修改其余的代码。
var classes = new Array('videos', 'event', 'link', 'photos');
for (var i = 0; i < classes.length; ++i)
{
$('.btn_add_' + classes[i]).click(
function()
{
for (var j = 0; j < classes.length; ++j)
{
if (this.hasClass('btn_add_' + classes[j]))
{
$('.block_' + classes[j]).toggle();
}
else
{
$('.block_' + classes[j]).hide();
}
}
});
}
你可以通过不分配像btn_add_event这样的元素类来使这段代码变得更优雅，但是给它们两个类：btn_add和event，甚至可以给它们提供id。我的解决方案基于您对当前HTML的描述。
答案 8 :(得分：0)
以下是我认为灵活且高效的功能。它假设您可以在父级中包含链接和html块，但是否则它使用闭包来预先计算所涉及的元素，因此单击是超快的。
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script>
<script type="text/javascript">
// Enables show/hide functionality on click.
// The elements within 'container' matching the selector 'blocks' are hidden
// When elements within 'container' matching the selector 'clicker' are clicked
// their attribute with the name 'clickerAttr' is appended to the selector
// 'subject' to identify a target, usually one of the 'blocks'. All blocks
// except the target are hidden. The target is shown.
//
// Change clickerAttr from 'linkTarget' to 'id' if you want XHTML compliance
//
// container: grouping of related elements for which to enable this functionality
// clicker: selector to element type that when clicked triggers the show/hide functionality
// clickerAttr: name of the DOM attribute that will be used to adapt the 'subject' selector
// blocks: selector to the html blocks that will be shown or hidden when the clicker is clicked
// subject: root of the selector to be used to identify the one html block to be shown
//
function initToggle(container,clicker,clickerAttr,blocks,subject) {
$(container).each(
function(idx,instance) {
var containerElement = $(instance);
var containedBlocks = containerElement.find(blocks);
containerElement.find(clicker).each(function(idxC, instanceClicker) {
var tgtE = containerElement.find(subject+instanceClicker.getAttribute(clickerAttr));
var clickerBlocks = containedBlocks.not(tgtE);
$(instanceClicker).click(function(event) {
clickerBlocks.hide();
tgtE.toggle();
});
});
// initially cleared
containedBlocks.hide();
}
);
}
$(function() {
initToggle('.toggle','a.link','linkTarget','div.block','div.');
});
</script>
</head>
<body>
Example HTML block toggle:
<div class="toggle">
<a href="javascript:;" linkTarget="A" class="link"> a </a> <br />
<a href="javascript:;" linkTarget="B" class="link"> b </a> <br />
<a href="javascript:;" linkTarget="C" class="link"> c </a> <br />
<div class="A block"> A </div>
<div class="B block"> B </div>
<div class="C block"> C </div>
</div> <!-- toggle -->
This next one is not enabled, to show scoping.
<div class="toggle2">
<a href="javascript:;" linkTarget="A" class="link"> a </a> <br />
<div class="A block">A</div>
</div> <!-- toggle2 -->
This next one is enabled, to show use in multiple positions on a page, such as in a portlet library.
<div class="toggle">
<a href="javascript:;" linkTarget="A" class="link"> a </a> <br />
<div class="A block">A</div>
</div> <!-- toggle (2) -->
</body>
</html>