重构jQuery重复模式

为了快速构建原型，我已将自己绘制到一个角落。重构以下jQuery代码的最佳方式是什么？其功能是在一些侧栏导航项目之间切换。为了可扩展性，我需要它更加动态。重构jQuery重复模式

您是否将if语句中的ID添加到数组中并遍历它们？使用变量？创建一个函数并在html端onClick上调用它？不管我怎么想，它都会导致一堆重复的代码。

谢谢！

// TOGGLING LEFT NAVIGATION 
 
    $('#settingsClick').click(function() { 
 
     if($('#addContainer, #noteContainer, #logoContainer, #themeContainer').is(':visible')) { 
 
     $('#addContainer').slideUp(350); 
 
     $('#noteContainer').slideUp(350); 
 
     $('#logoContainer').slideUp(350); 
 
     $('#settingsContainer').slideDown(350); 
 
     $('#themeContainer').slideUp(350); 
 
     } else { 
 
     $('#settingsContainer').slideToggle(350); 
 
     } 
 
    }); 
 

 
    $('#addClick').click(function() { 
 
     if($('#settingsContainer, #noteContainer, #logoContainer, #themeContainer').is(':visible')) { 
 
     $('#settingsContainer').slideUp(350); 
 
     $('#noteContainer').slideUp(350); 
 
     $('#logoContainer').slideUp(350); 
 
     $('#addContainer').slideDown(350); 
 
     $('#themeContainer').slideUp(350); 
 
     } else { 
 
     $('#addContainer').slideToggle(350); 
 
     } 
 
    }); 
 

 
    $('#noteClick').click(function() { 
 
     if($('#settingsContainer, #addContainer, #logoContainer, #themeContainer').is(':visible')) { 
 
     $('#settingsContainer').slideUp(350); 
 
     $('#addContainer').slideUp(350); 
 
     $('#logoContainer').slideUp(350); 
 
     $('#noteContainer').slideDown(350); 
 
     $('#themeContainer').slideUp(350); 
 
     } else { 
 
     $('#noteContainer').slideToggle(350); 
 
     } 
 
    }); 
 

 
    $('#logoClick').click(function() { 
 
     if($('#settingsContainer, #addContainer, #noteContainer, #themeContainer').is(':visible')) { 
 
     $('#settingsContainer').slideUp(350); 
 
     $('#addContainer').slideUp(350); 
 
     $('#noteContainer').slideUp(350); 
 
     $('#logoContainer').slideDown(350); 
 
     $('#themeContainer').slideUp(350); 
 
     } else { 
 
     $('#logoContainer').slideToggle(350); 
 
     } 
 
    }); 
 

 
    $('#themeClick').click(function() { 
 
     if($('#settingsContainer, #addContainer, #noteContainer, #logoContainer').is(':visible')) { 
 
     $('#settingsContainer').slideUp(350); 
 
     $('#addContainer').slideUp(350); 
 
     $('#noteContainer').slideUp(350); 
 
     $('#logoContainer').slideUp(350); 
 
     $('#themeContainer').slideDown(350); 
 
     } else { 
 
     $('#themeContainer').slideToggle(350); 
 
     } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a id="settingsClick">Click Me</a><br> 
 
<div id="settingsContainer">Content...</div> 
 

 
<br><br> 
 

 
<a id="addClick">Click Me</a><br> 
 
<div id="addContainer">Content...</div> 
 

 
<br><br> 
 

 
<p> Etc... Etc....</p>

来源

2017-02-18 Sergio

Satpal，你打我吧。现在，示例html已经启动。 – Sergio

是的我可以访问html代码 – Sergio

你应该使用普通CSS类组

，即header和content。使用建立的关系，您可以将其他内容持有者和与当前点击的标题元素相关联的内容作为目标。

$('.container .header').on('click', function() { 
 
    //Get the current element 
 
    var $this = $(this); 
 

 
    //find the content 
 
    var $content = $this.closest('.container').find('.content'); //$this.next() 
 

 
    //get all contents 
 
    var content = $('.container .content'); 
 

 
    //Slide up others 
 
    content.not($content).slideUp(350); 
 

 
    //Slide down 
 
    $content.slideToggle(350); 
 
});

.content { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="header" id="settingsClick">Click Me</div> 
 
    <div class="content" id="settingsContainer">Content...</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="header" id="addClick">Click Me</div> 
 
    <div class="content" id="addContainer">Content...</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="header" id="noteClick">Click Me</div> 
 
    <div class="content" id="noteContainer">Content...</div> 
 
</div>

来源

2017-02-18 09:43:51 Satpal

太棒了。谢谢你的Satpal！ – Sergio

最好的办法是做它像这样

$(document).on('click', ".trigger", function() { 
 
    var sibling_content = $(this).siblings(".content"); 
 
    if (!sibling_content.hasClass('active')) { 
 
    $(".content").slideUp('slow').removeClass('active'); 
 
    sibling_content.slideDown('slow').addClass('active'); 
 
    } else { 
 
    sibling_content.slideUp('slow').removeClass('active'); 
 
    } 
 
})

.trigger { 
 
    background-color: red; 
 
    color: white; 
 
    font-size: 16px; 
 
} 
 

 
.content { 
 
    background-color: blue; 
 
    color: white; 
 
    font-size: 16px; 
 
    padding: 20px 0; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="trigger">trigger</div> 
 
    <div class="content">content</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="trigger">trigger</div> 
 
    <div class="content">content</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="trigger">trigger</div> 
 
    <div class="content">content</div> 
 
</div> 
 
<div class="container"> 
 
    <div class="trigger">trigger</div> 
 
    <div class="content">content</div> 
 
</div>

来源

2017-02-18 09:50:30

这看起来不错的不朽Dude。谢谢。 – Sergio

重构jQuery重复模式

回答

相关问题