有没有办法简化 jQuery 代码 [关闭]

Question

关闭。 这个问题是基于意见的。 它目前不接受答案。

---

想改善这个问题吗？ 更新问题，以便通过编辑这篇文章用事实和引文来回答问题。

去年关闭。

改进这个问题

每个人，我创建了一组 4 个按钮（在列表中），当用户将鼠标悬停在按钮上时，它会显示其下方每个按钮的描述。 我使用 jQuery 来切换段落元素的类以使其工作。 我所做的工作非常好，但我只是想知道是否有一种更简洁更简单的方式我可以实现 jQuery 代码，或者它的方式是否完美？ 我非常感谢您对此的意见。 提前致谢。

 $('#web').hover(function(){ $('#web-blurp').toggleClass('show-blurp'); }); $('#design').hover(function(){ $('#design-blurp').toggleClass('show-blurp'); }); $('#film').hover(function(){ $('#film-blurp').toggleClass('show-blurp'); }); $('#marketing').hover(function(){ $('#marketing-blurp').toggleClass('show-blurp'); });

 body{ background-color: black; } .hero-container { position: absolute; top: 6%; left: 0; right: 0; margin: 18% auto; } .hero-content { text-align: center; margin: 0 auto; } .hero-content li { display: inline-block; } .hero-content a { display: block; width: 200px; background-color: #fff; margin-right: 20px; text-align: center; border-radius: 5px; } .hero-content a { text-decoration: none; } .hero-content span { display: inline-block; margin: 40% 0; font-family: Sans-Serif; text-transform: uppercase; font-size: 1.2em; font-weight: 400; color: blue; } .feat-blurp { width: 810px; margin: 0 auto; color: #fff; font-family: Sans-Serif; font-weight: lighter; font-size: 1.3em; } .hide-blurp { display: none; opacity: 0; transition: opacity .5s linear; } .show-blurp { display: block; opacity: 1; transition: opacity .5s linear; animation-name: blurp-up, blurp-fade; animation-duration: 1s; animation-fill-mode: both; } @keyframes blurp-up { from{ transform: translateY(50px)} to{ transform: translateY(0)} } @keyframes blurp-fade { from { opacity: 0; } to { opacity: 1; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="hero-container"> <div class="btn-list"> <ul class="hero-content"> <li><a href="#" class="feat-btn box-one" id="web"> <span>button 1</span> </a></li> <li><a href="#" class="feat-btn box-two" id="design"> <span>button 2</span> </a></li> <li><a href="#" class="feat-btn box-three" id="film"> <span>button 3</span> </a></li> <li><a href="#" class="feat-btn box-four" id="marketing"> <span>button 4</span> </a></li> </ul> </div> <div class="btn-blurps"> <div class="feat-blurp"> <p id="web-blurp" class="hide-blurp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p> <p id="design-blurp" class="hide-blurp">nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat </p> <p id="film-blurp" class="hide-blurp">reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p id="marketing-blurp" class="hide-blurp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p> </div> </div> </div>

Answer 1

我的建议是在段落上使用-data属性来显示正确的属性，而不是为每个按钮编写一个处理程序。 您也不需要以这种方式为每个按钮设置单独的 id。

 $('.feat-btn').hover(function(){ var id = $(this).data('id'); $('#' + id).toggleClass('show-blurp'); });

 body{ background-color: black; } .hero-container { position: absolute; top: 6%; left: 0; right: 0; margin: 18% auto; } .hero-content { text-align: center; margin: 0 auto; } .hero-content li { display: inline-block; } .hero-content a { display: block; width: 200px; background-color: #fff; margin-right: 20px; text-align: center; border-radius: 5px; } .hero-content a { text-decoration: none; } .hero-content span { display: inline-block; margin: 40% 0; font-family: Sans-Serif; text-transform: uppercase; font-size: 1.2em; font-weight: 400; color: blue; } .feat-blurp { width: 810px; margin: 0 auto; color: #fff; font-family: Sans-Serif; font-weight: lighter; font-size: 1.3em; } .hide-blurp { display: none; opacity: 0; transition: opacity .5s linear; } .show-blurp { display: block; opacity: 1; transition: opacity .5s linear; animation-name: blurp-up, blurp-fade; animation-duration: 1s; animation-fill-mode: both; } @keyframes blurp-up { from{ transform: translateY(50px)} to{ transform: translateY(0)} } @keyframes blurp-fade { from { opacity: 0; } to { opacity: 1; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="hero-container"> <div class="btn-list"> <ul class="hero-content"> <li><a href="#" class="feat-btn box-one" data-id="web"> <span>button 1</span> </a></li> <li><a href="#" class="feat-btn box-two" data-id="design"> <span>button 2</span> </a></li> <li><a href="#" class="feat-btn box-three" data-id="film"> <span>button 3</span> </a></li> <li><a href="#" class="feat-btn box-four" data-id="marketing"> <span>button 4</span> </a></li> </ul> </div> <div class="btn-blurps"> <div class="feat-blurp"> <p id="web" class="hide-blurp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p> <p id="design" class="hide-blurp">nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat </p> <p id="film" class="hide-blurp">reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p id="marketing" class="hide-blurp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p> </div> </div> </div>

Answer 2

您可以将事件与所有锚元素一起附加。 在事件处理函数中，您可以检查当前元素的id并使用它来动态切换类（因为所有p元素的id以-blurp ）。

尝试以下方式：

 $('.hero-content a').hover(function(){ $('#' + this.id + '-blurp').toggleClass('show-blurp'); });

 body{ background-color: black; } .hero-container { position: absolute; top: 6%; left: 0; right: 0; margin: 18% auto; } .hero-content { text-align: center; margin: 0 auto; } .hero-content li { display: inline-block; } .hero-content a { display: block; width: 200px; background-color: #fff; margin-right: 20px; text-align: center; border-radius: 5px; } .hero-content a { text-decoration: none; } .hero-content span { display: inline-block; margin: 40% 0; font-family: Sans-Serif; text-transform: uppercase; font-size: 1.2em; font-weight: 400; color: blue; } .feat-blurp { width: 810px; margin: 0 auto; color: #fff; font-family: Sans-Serif; font-weight: lighter; font-size: 1.3em; } .hide-blurp { display: none; opacity: 0; transition: opacity .5s linear; } .show-blurp { display: block; opacity: 1; transition: opacity .5s linear; animation-name: blurp-up, blurp-fade; animation-duration: 1s; animation-fill-mode: both; } @keyframes blurp-up { from{ transform: translateY(50px)} to{ transform: translateY(0)} } @keyframes blurp-fade { from { opacity: 0; } to { opacity: 1; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="hero-container"> <div class="btn-list"> <ul class="hero-content"> <li><a href="#" class="feat-btn box-one" id="web"> <span>button 1</span> </a></li> <li><a href="#" class="feat-btn box-two" id="design"> <span>button 2</span> </a></li> <li><a href="#" class="feat-btn box-three" id="film"> <span>button 3</span> </a></li> <li><a href="#" class="feat-btn box-four" id="marketing"> <span>button 4</span> </a></li> </ul> </div> <div class="btn-blurps"> <div class="feat-blurp"> <p id="web-blurp" class="hide-blurp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p> <p id="design-blurp" class="hide-blurp">nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat </p> <p id="film-blurp" class="hide-blurp">reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p id="marketing-blurp" class="hide-blurp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p> </div> </div> </div>

Answer 3

如果您的id名称保持不变。 您可以使用它并“构造”要选择和显示的段落的 id。

见下文

 $('.feat-btn').hover(function(){ const id = $(this).attr('id'); const paragraph = $(`#${id}-blurp`) $(paragraph).toggleClass('show-blurp'); });

 body{ background-color: black; } .hero-container { position: absolute; top: 6%; left: 0; right: 0; margin: 18% auto; } .hero-content { text-align: center; margin: 0 auto; } .hero-content li { display: inline-block; } .hero-content a { display: block; width: 200px; background-color: #fff; margin-right: 20px; text-align: center; border-radius: 5px; } .hero-content a { text-decoration: none; } .hero-content span { display: inline-block; margin: 40% 0; font-family: Sans-Serif; text-transform: uppercase; font-size: 1.2em; font-weight: 400; color: blue; } .feat-blurp { width: 810px; margin: 0 auto; color: #fff; font-family: Sans-Serif; font-weight: lighter; font-size: 1.3em; } .hide-blurp { display: none; opacity: 0; transition: opacity .5s linear; } .show-blurp { display: block; opacity: 1; transition: opacity .5s linear; animation-name: blurp-up, blurp-fade; animation-duration: 1s; animation-fill-mode: both; } @keyframes blurp-up { from{ transform: translateY(50px)} to{ transform: translateY(0)} } @keyframes blurp-fade { from { opacity: 0; } to { opacity: 1; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="hero-container"> <div class="btn-list"> <ul class="hero-content"> <li><a href="#" class="feat-btn box-one" id="web"> <span>button 1</span> </a></li> <li><a href="#" class="feat-btn box-two" id="design"> <span>button 2</span> </a></li> <li><a href="#" class="feat-btn box-three" id="film"> <span>button 3</span> </a></li> <li><a href="#" class="feat-btn box-four" id="marketing"> <span>button 4</span> </a></li> </ul> </div> <div class="btn-blurps"> <div class="feat-blurp"> <p id="web-blurp" class="hide-blurp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p> <p id="design-blurp" class="hide-blurp">nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat </p> <p id="film-blurp" class="hide-blurp">reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p id="marketing-blurp" class="hide-blurp">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p> </div> </div> </div>