如何避免在jQuery中重复类似的代码？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何避免在jQuery中重复类似的代码？相关的知识，希望对你有一定的参考价值。
这是我在这段代码中的代码我正在使用id，它工作正常，但它不是动态的。它应该像一个活跃的一个。
我重复的代码不是正确的方式，我必须使用不同的ID，因为它应该是常见的类和简单的代码
$('#img2').on('click',function(){
$("#2").addClass('text-color');
});
$('#img3').on('click',function(){
$("#3").css("color","white");
});
$('#img4').on('click',function(){
$("#4").css("color","white");
});
$('#img5').on('click',function(){
$("#5").css("color","white");
});
$('#img6').on('click',function(){
$("#6").css("color","white");
});
它应该是qazxsw poi而不是qazxsw poi，它应该是paralx-dot-1 insted of #img2
只有一个＃2 /图标文本一次更改其颜色，其他图标颜色保持不变
icon-text这是#2
最简单的我可以理解你想在图像标签上添加类到以前的跨度兄弟
<ul class="paralx-position">
<li class="paralx-dots"><span class="icon-text" id="2">Accelerate</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div2" id="img2" tabindex="0"></img></li>
<li class="paralx-dots"><span class="icon-text" id="3">Transform</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div3" id="img3" tabindex="0"></img></li>
<li class="paralx-dots"><span class="icon-text-main">Build</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-2" class="Active" data-box="div1" id="img1" tabindex="0"><span class="icon-position"><img src="images/logos/noun_build_1909132.svg" class="icon"></img></span></img></li>
<li class="paralx-dots"><span class="icon-text" id="4">Ignite</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div4" id="img4" tabindex="0"></img></li>
<li class="paralx-dots"><span class="icon-text" id="5">Develop</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div5" id="img5" tabindex="0"></img></li>
<li class="paralx-dots"><span class="icon-text" id="6">Engineer</span><img src="images/Circle 1- Blue .svg" class="paralx-dot-1" data-box="div6" id="img6" tabindex="0"></img></li>
</ul>选择器Fiddle选择所有控件$(document).ready(function(){
$('img[id^=img]').click(function(){
var prevSpan = $(this).prev('span');
prevSpan.css("color","white");
alert(prevSpan.text()); // for debugging
});
});
标签，其中Id以字符串$('img[id^=img]')开头
并且img搜索放置"img"标签之前的兄弟姐妹$(this).prev('span')
编辑：更新了span
添加一个类img
Fiddle
然后使用以下代码
.highlight希望这对你有用。
通过使用通用查询选择器并避免硬编码ID，您可以提高效率 - 这也使代码更易读和可维护。为DOM结构执行此操作的一种示例方法是：
.highlight {
color: white;
}
$(document).ready(function(){
$('img[id^=img]').click(function(){
$('.highlight').removeClass('highlight');
var prevSpan = $(this).prev('span');
prevSpan.addClass("highlight");
alert(prevSpan.text()); // for debugging
});
});
以上是关于如何避免在jQuery中重复类似的代码？的主要内容，如果未能解决你的问题，请参考以下文章