如何避免在jQuery中重复类似的代码?

问题描述 投票:1回答:2

这是我在这段代码中的代码我正在使用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
jquery
2个回答
1
投票

这是#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

希望这对你有用。


0
投票

通过使用通用查询选择器并避免硬编码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    
    });
});
© www.soinside.com 2019 - 2024. All rights reserved.