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");
});

应该{{1}} paralx-dot-1 并且它应该是#img2的{{1}}

只有一个＃2 /图标文本一次更改其颜色，而其他图标颜色保持不变

icon-text

Answer 1

这里是Fiddle

最简单的理解是您想在图像标签上的上一个跨距兄弟中添加类

$(document).ready(function(){
    $('img[id^=img]').click(function(){
            var prevSpan = $(this).prev('span');
            prevSpan.css("color","white");
            alert(prevSpan.text()); // for debugging
    });
});

其中选择器$('img[id^=img]')选择所有具有ID以字符串img开头的控件"img"的标签

然后$(this).prev('span')搜索放置在span标记之前的同级img

编辑：更新了Fiddle

添加课程.highlight

.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    
    });
});

希望这对您有用。

Answer 2

您可以通过使用通用查询选择器并避免使用硬编码的ID来提高效率，这也使代码更具可读性和可维护性。为您的DOM结构执行此操作的一种示例方法是：

// Query for all li elements inside the ul with hthe class paralx-position
var $lis = $('ul.paralx-position > li');
// Query for all img tags which is a direct child of a li element 
$lis.find(' > img').click(function(){

  // Reset all span colors
  $lis.find('> span').css('color','black')
  
  // Set the color of span which is a sibling of the clicked image
  $(this).parent().find('> span').css('color','blue')
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

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

2 个答案: