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

Question

这是我在这段代码中的代码我正在使用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

Answer 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

希望这对你有用。

Answer 2

通过使用通用查询选择器并避免硬编码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    
    });
});